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

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

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

transformって何？

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

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

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

transformの使い方

移動効果　translate

translateは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」で「度」を意味します。

例）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倍」になります。

例）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」を使用します。

例）Y軸方向へ20度歪みをつけたい。

copyする
transform:skew(0,20deg);

copyする
transform:skewY(20deg);

まとめ

いかがだったでしょうか。
cssを勉強しているとよく見かける、transform。似た単語が多くごっちゃになりがちですが、正しく理解するだけで、かなり使いやすいプロパティの一つです。

transitionと合わせながらぜひ使ってみてくださいね！
また別の記事でtransformの関数の一つ、「matrix」に関して詳しく説明します。

【CSS】これを使うだけで垢抜け！手軽なcssアニメーションtransitionを使いこなそう！今回は、ひと手間加えるだけで垢抜けられる、手軽なcssアニメーション「transition」についてご紹介します！...