シュウ

今回は【CSS】transformの使い方、要素を2Dに変形する！
の解説になります！

こんな方に読んでほしい

• CSSを学び始めた方へ
• transformプロパティについて学びたい方へ
• 今回はtransform2D編についての解説になります。

上の図のように、transformを指定することにより、画像を回転させることも可能です。
また、その他にも、「拡大・縮小」、「傾斜」、「移動」などといったことが可能です。

transformの使い方について

transformプロパティとは、要素を2D、3Dに変形させます。今回は2D編です。
transformでは、「マトリクス変形」、「回転」、「拡大・縮小」、「傾斜」、「移動」の指定が可能です。
今回は個別に書き方をご紹介していきます。

transform マトリクス変形について

6個の数値をカンマ(,)で区切り2D変形の指定します。
transform マトリクス変形の書き方は以下になります。

/*transform matrix*/
要素 {transform: matrix(a, b, c, d, e, f);}

　「クマの画像」に対して、水平方向の縮尺率「1」、垂直方向の傾斜率「0.4」、水平方向の傾斜率「0」、
水平方向の傾斜率「0.5」、水平方向の移動距離「10」、垂直方向の移動距離「10」の指定をしています。
「キリンの画像」に対して、垂直方向の傾斜率「-0.4」とマイナス指定をしています。
マイナス指定も可能になります。

マトリクス変形について

<img src="画像パス(クマの画像)" class="matrix01">
<img src="画像パス(キリンの画像)" class="matrix02">

/*--クマの画像--*/
img.matrix01 {transform: matrix(1, 0.4, 0, 0.5, 10, 10);}

/*--キリンの画像--*/
img.matrix02 {transform: matrix(1, -0.4, 0, 0.5, 10, 10);}

ベンダープレフィクスについて

「transform」ですが、ブラウザによっては対応しない可能性があります。
対応しない場合はベンダープレフィクスの指定をおこないましょう。
「Can I use」(https://caniuse.com/)では、対象のブラウザでベンダープレフィックスが必要かどうかを確認してくれます。
黄色枠に対象となるCSSを入力してください。

transform マトリクス変形のベンダープレフィックスの書き方は以下になります。

/*transform matrix*/
要素 {
	-webkit-transform: matrix(a, b, c, d, e, f);
	-moz-transform: matrix(a, b, c, d, e, f);
	-ms-transform: matrix(a, b, c, d, e, f);
	transform: matrix(a, b, c, d, e, f);
}

transform 回転について

回転を指定するには、rotate関数を使用します。
transform 回転の書き方は以下になります。

/*transform rotate*/
要素 {transform: rotate(回転角度);}

　「クマの画像」に対して「20deg」は時計周りに20度回転になります。
　「キリンの画像」に対して「-20deg」は反時計周りに20度回転になります。

回転について

<img src="画像パス(クマの画像)" class="rotate01">
<img src="画像パス(キリンの画像)" class="rotate02">

/*--クマの画像--*/
img.rotate01 {transform: rotate(20deg);}

/*--キリンの画像--*/
img.rotate02 {transform: rotate(-20deg);}

transform 拡大・縮小について

拡大・縮小を指定するには、scale関数を使用します。
transform 拡大・縮小の書き方は以下になります。

/*transform matrix*/
要素 {transform: scale(sx,sy);}

/*scaleX X軸方向*/
要素 {transform: scaleX();}

/*scaleY Y軸方向*/
要素 {transform: scaleY();}

　「クマの画像」に対して「1.4,0.5」と指定し、X軸方向は1.4倍に拡大し、Y軸方向は0.5(50%)に縮小しています。
　「キリンの画像」に対して「X=1.4」と指定し、X軸方向は1.4倍に拡大しています。

拡大・縮小について

<img src="画像パス(クマの画像)" class="scale01">
<img src="画像パス(キリンの画像)" class="scale02">

/*--クマの画像--*/
img.scale01 {transform: scale(1.4,0.5);}

/*--キリンの画像--*/
img.scale02 {transform: scaleX(1.4);}

transform 傾斜について

傾斜を指定するには、skew関数を使用します。
transform 傾斜の書き方は以下になります。

/*transform skew*/
要素 {transform: skew(X軸,Y軸);}

/*skewX X軸方向*/
要素 {transform: skewX();}

/*skewY Y軸方向*/
要素 {transform: skewY();}

　「クマの画像」に対して「15deg」と指定し、X軸方向に傾斜率15度の指定をしています。
　「キリンの画像」に対して「15deg」と指定し、Y軸方向に傾斜率15度の指定をしています。

傾斜について

<img src="画像パス(クマの画像)" class="skew01">
<img src="画像パス(キリンの画像)" class="skew02">

/*--クマの画像--*/
img.skew01 {transform: skewX(15deg);}

/*--キリンの画像--*/
img.skew02 {transform: skewY(15deg);}

transform 移動について

移動を指定するには、translate関数を使用します。
transform 移動の書き方は以下になります。

/*transform matrix*/
要素 {transform: translate(X軸の移動距離,Y軸の移動距離);}

/*translateX X軸方向*/
要素 {transform: translateX(移動距離);}

/*translateY Y軸方向*/
要素 {transform: translateY(移動距離);}

　「クマの画像」に対して「50px, 25px」と指定し、X軸方向に50px、Y軸方向に25pxの移動を指定をしています。
　「キリンの画像」に対して「X-50px」と指定し、X軸方向に移動-50pxの指定をしています。

移動について

<img src="画像パス(クマの画像)" class="translate01">
<img src="画像パス(キリンの画像)" class="translate02">

/*--クマの画像--*/
img.translate01 {transform: translate(50px, 25px);}

/*--キリンの画像--*/
img.translate02 {transform: translateX(-50px);}

関連記事

【CSS】transformの使い方、要素を3Dに変形する！
transform(3D)では、「マトリクス変形」、「回転」、「拡大・縮小」、「移動」、「遠近効果」についての指定
【CSS】transform-originの使い方、中心点(位置)を指定する！
transform-originとは、要素を2D、3Dに変形させる時の中心点(位置)を指定
【CSS】transform-styleの使い方、3D変形を適用させる！
transform-styleとは、3D変形させる時の子要素の配置方法を指定します。

まとめ

今回は2Dに関しての基本的な指定方法について書きましたが、
次回は3Dに関しての記事を書きます。

最新記事

• 

  【CSS】グラデーション色々なパターンを解説！

  2024.05.15

• 

  【レスポンシブデザイン】アニメーションが動かない原因

  2024.05.09

• 

  【CSS】擬似要素、beforeとafterに画像を表示しサイズの調整ついて!

  2024.05.09

• 

  【CSS】display flex指定方法のまとめを解説

  2024.03.07

関連記事

< 前の記事

【CSS】column-widthの使い方、段組みの列の幅を指定する!

次の記事 >

【CSS】transformの使い方、要素を3Dに変形する！