transformプロパティを使うことで要素を変形させることができます。
Webサイトに動きをつけるときに使用することが多いため、Web制作には必須の知識です。
書き方さえ分かれば簡単に扱うことができますので、この記事を読んで身に着けていきましょう。
transformプロパティとは
transformプロパティは、回転、伸縮、傾斜、移動などの動きを要素に指定する際に使用するCSSプロパティです。
このプロパティを使用することで3次元的な動きが可能になります。
transformプロパティの値に指定できる関数
transformプロパティには下記の関数が用意されています。
この関数を使用することで様々な効果を与えることができます。
| 関数名 | 読み方 | 実行効果 |
| translate | トランスレイト | 移動 |
| rotate | ローテート | 回転 |
| scale | スケール | 伸縮 |
| skew | スキュー | 傾斜 |
translateの使い方
translateを使用することで要素の移動が可能になります。
translateX()を使用した例
今回はわかりやすく、ホバーした際の動きに使用しています。
See the Pen transform translateX by ZeroPlus (@zeroplus-programming) on CodePen.
translateX()を使用することでX軸（横軸）の移動が可能になります。
要素1には、transform: translateX(40px);を使用してプラス方向（右側）に移動します。
要素2には、transform: translateX(-40px);を使用してマイナス方向（左側）に移動します。
translateY()を使用した例
See the Pen tranform tranlateY by ZeroPlus (@zeroplus-programming) on CodePen.
translateY()を使用することでY軸（縦軸）の移動が可能になります。
要素1には、transform: translateY(40px);を使用してプラス方向（下側）に移動します。
要素2には、transform: translateY(-40px);を使用してマイナス方向（上側）に移動します。
translateZ()を使用した例
See the Pen transform translateZ by ZeroPlus (@zeroplus-programming) on CodePen.
translateZ()を使用することでZ軸（奥行き）の移動が可能になります。
注意としては、translateZ()自体は単体では使用できないことです。
使用する際には、perspective()（パースペクティブ）も一緒に指定します。
perspective()を使用することで、ユーザー視点の位置を持たせることで、奥行きの表現が可能になります。
要素1には、transform: perspective(400px) translateZ(40px);を使用してプラス方向（近づく）に移動します。
要素2には、transform: perspective(400px) translateZ(-40px);を使用してマイナス方向（遠ざかる）に移動します。
それぞれ同時に指定することで様々な表現が可能になります。
rotateの使い方
rotateを使用することで、要素の回転が可能になります。
See the Pen transform rotate by ZeroPlus (@zeroplus-programming) on CodePen.
要素1には、transform: rotateX(360deg);を使用してX軸（横方向）に回転します。
要素2には、transform: rotateY(360deg);を使用してY軸（縦方向）に回転します。
値に使用しているdegは「デグ」と読み、degree（度数）の略になります。
360degは360度となります。
scaleの使い方
scaleを使用することで、要素の伸縮率を変更することができます。
See the Pen transform scale by ZeroPlus (@zeroplus-programming) on CodePen.
要素1には、transform: scale(1.5);を使用して1.5倍拡大しています。
要素2には、transform: scale(0.75);を使用して0.75倍縮小しています。
要素3には、transform: scale(1.5, 0.75);を使用して、横軸と縦軸の倍率を変更しています。
skewの使い方
skewを使用することで、要素の傾斜が可能になります。
See the Pen transform skew by ZeroPlus (@zeroplus-programming) on CodePen.
要素1には、transform: skewX(45deg);を使用して,横方向に傾斜をつけています。
要素2には、transform: skewY(45deg);を使用して,縦方向に傾斜をつけています。
要素3には、transform: skew(10deg,10deg);を使用して,縦横方向に傾斜をつけています。
transformのまとめ
transformプロパティは、要素に動きをつける際に使用するプロパティです。Webサイトでは様々なアニメーションを実装することが多くあるため、どのような動きをするのか覚えておきましょう。
自分で色々作成してみても学習になるので今回紹介した要素の数値を変更したり、色々試してみましょう。
