【CSS】transformの使い方を解説！要素を自由自在に操ってアニメーションをマスターしよう！

お久しぶりです。
GOSHIMMERです。

今回は、要素を自由自在に動かせる、cssプロパティ「transform」についてご紹介します！

transformって何？

transformとは、CSS3で追加された新しいプロパティです。要素を回転、拡大・縮小、傾斜、移動させることができます。
以前紹介した、「transition」と似ているように感じますが、「transition」は時間に関する変化を制御できるプロパティなので、今回学ぶ「transform」と組み合わせることでより高度な仕上がりになります。

今回は、transformの中でも、要素の移動、変形を表現する4つの関数をご紹介します。

translate	移動効果。X軸、Y軸、Z軸での移動を設定することができます。
rotate	回転効果。translateと同様に、X軸、Y軸、Z軸の回転を設定できます。
scale	伸縮効果。X軸、Y軸、Z軸の拡大、縮小を設定できます。
skew	歪み効果。X軸、Y軸の歪みを設定できます。

これから一つ一つ解説していきます。

transformの使い方

移動効果　translate

translateはX軸、Y軸、Z軸への移動を指定することができます。

translate( X軸 , Y軸 )	X方向、Y方向の移動距離をカンマで区切って指定します。
translateX( X軸 )	X軸（横方向）の移動距離を指定できます。
translateY( Y軸 )	Y軸（縦方向）の移動距離を指定できます。
translateZ( Z軸 )	translateZは単体では何の動きも実現してくれません。例えば、遠近感を出すperspective()と使うことで奥行きのある移動をかなえることができます。
translate3d( X軸 , Y軸 , Z軸 )	3dの動きを実現してくれます。X軸、Y軸、Z軸の値を設定します。

例）横に10px、縦に20%移動させたい

copyする
transform:translate(10px,20%);

copyする
transform:translateX(10px);
transform:translateY(20%);

このように数値で指定することができます。

回転効果　rotate

rotateはX軸、Y軸、Z軸への回転を指定することができます。
また、単位は「deg」「rad(角度・弧度法のラジアン)」「turn(回転)」がありますが、「deg」を用いることが多く、「deg」とは「degree」で「度」を意味します。

rotate( 回転角度 )	この形で宣言すると、要素の中心を基準に回転角度を指定します。簡単にいうと、rotateZと同じ動きをします。
rotateX( X軸 )	X軸（横方向）の回転角度を指定できます。X軸を基準として、垂直方向へ回転させたいときに指定します。
rotateY( Y軸 )	Y軸（縦方向）の回転角度を指定できます。Y軸を基準として、水平方向へ回転させたいときに指定します。
rotateZ( Z軸 )	Z軸は要素の中心を基準とした回転になりますので、rotate()と同じ動きをします。3Dの動きを理解するためにはZの回転を理解することが重要になってきます。
rotate3d( X軸 , Y軸 , Z軸 , 回転角度 )	3Dの立体的な回転を実現してくれます。X軸、Y軸、Z軸の値を一気に設定します。

例）z方向へ20度回転させたい。

copyする
transform:rotate(20deg);
transform:rotateZ(20deg);

例）3dへ180度回転させたい。

copyする
transform:rotate3d(1,1,1,180deg);

rotate3d();に関しては、X,Y,Z軸への変化の度合いを指定する必要があり、これに関してはここでは詳しく説明しません。
便利なジェネレーターを利用するか、その他解説しているブログ等をご参照ください。

伸縮効果　scale

scaleはX軸、Y軸、Z軸への伸縮を指定することができます。
また、単位は使用せずに、「1.5」と書けば、「1.5倍」に、「0.5」と書けば、「0.5倍」になります。

scale( X軸 , Y軸 )	X軸、Y軸の値を指定できます。2Dで縦と横に拡大縮小されます。
scaleX( X軸 )	X軸（横方向）の伸縮度合を指定できます。
scaleY( Y軸 )	Y軸（縦方向）の伸縮度合を指定できます。
scaleZ( Z軸 )	scaleZは単体では何の動きも実現してくれません。例えば、遠近感を出すperspective()と使うことで奥行きのある伸縮をかなえることができます。
scale3d( X軸 , Y軸 , Z軸 )	3Dの立体的な伸縮を実現してくれます。X軸、Y軸、Z軸の値を一気に設定します。こちらも3D効果を実現する値と一緒に指定する必要があります。

例）X軸方向へ1.5倍、Y軸方向へ0.5倍伸縮させたい。

copyする
transform:scale(1.5,0.5);

copyする
transform:scaleX(1.5);
transform:scaleY(0.5);

例）X軸方向へ、1.5倍、Y軸方向へ0.5倍、Z軸（奥行）へ10倍（3D）伸縮させたい。

copyする
transform: perspective(400px) scale3d(1.5,0.5,10);

歪み効果　skew

skewはX軸、Y軸への歪み（傾斜）を指定することができます。
また、こちらも単位は角度を示す「deg」を使用します。

skew( X軸 , Y軸 )	X軸、Y軸に対する歪みをまとめて指定することができます。
skewX( X軸 )	X軸（横方向）の歪みを指定できます。高さを固定したまま、横にスライドさせるイメージです。
skewY( Y軸 )	Y軸（縦方向）の歪みを指定できます。横幅を固定したまま、縦にスライドさせるイメージです。