Chapter 02無料公開

transformプロパティについて

7968
7968
2021.07.18に更新

transform(トランスフォーム)は、直訳すると変形という意味です。
変形には移動、回転、伸縮、傾斜の 4 つがあります。
transform プロパティの値に関数を指定することで、移動、回転、伸縮、傾斜の設定ができます。
移動、回転、伸縮は、3D( XYZ 方向)による指定ができます。
transform プロパティの値に指定できる関数は下記になります。

transform プロパティの値に指定できる関数

No 関数 読み方 変形効果 2D(XY方向) 3D(XYZ方向)
01 translate トランスレイト 移動
02 rotate ローテート 回転
03 scale スケール 伸縮
04 skew スキュー 傾斜

上述している通り、transform プロパティの値に関数を指定することで、変形の設定ができます。
移動や回転など複数指定するときは、記述の仕方に注意する必要があります。
最初に transform の記述の仕方について確認した後に各関数について見ていきましょう。