cssで要素を変形させる

HTMLの要素を変形させる代表的なcssの指定方法をまとめたいと思います。
前回の記事で書いたkeyframesに要素の変形を組み合わせると、「パタッ」と要素が出現する、「くるっ」と要素が回転する、といったようなユニークな動きを実現することが可能になります。

transform: 〇〇;

要素を2D, 3Dに変化させ、移動、回転、伸縮、傾斜の4つの変形を加えることができます。

移動(translate)

• translate(X軸方向の移動距離, Y軸方向の移動距離);
• translateX(X軸方向の移動距離);
• translateY(Y軸方向の移動距離);
• translate(Z軸方向の移動距離);
• translate3d(X軸方向の移動距離, Y軸方向の移動距離, Z軸方向の移動距離);

(例)
tarnsform: translate(50px, 50px);

回転(rotate)

• rotate(回転角度);
• rotateX(X軸の回転角度);
• rotateY(Y軸の回転角度);
• rotateZ(Z軸の回転角度);
• rotate 3d(X軸, Y軸, Z軸, 回転角度);

(例)
transform: rotate(40deg);

伸縮(scale)

• scale(伸縮の数値);
• scaleX(X軸の伸縮の数値);
• scaleY(Y軸の伸縮の数値);
• scaleZ(Z軸の伸縮の数値);
• scaled3d(X軸の仲間の数値, Y軸の伸縮の数値, Z軸の伸縮の数値);

(例)
transform: scale(1.1);

傾斜(skew)

• skew(X軸の傾斜角度, Y軸の傾斜角度)
• skew(X軸の傾斜角度)
• skew(Y軸の傾斜角度)

(例)
transform: skew(50deg, 50deg);     ※　傾斜はZ軸なし、2Dのみ。

transform-origin: ( 〇〇 );

要素の起点を指定します。

要素の中心の初期値は
2Dの場合 50%, 50%
3Dの場合50%, 50%, 0です。

(例)
transform-origin: (50px, 50px);
transform-origin: (center, center);
transform-origin: (left);

perspective: ( 〇〇 );

要素に対して遠近感を設定します。

• perspective: ( 値 );

※ 指定した要素だけに効果を適応させたい場合は、transformの中に記述します。

• transform: perspective( 値 );

(例)
perspective: ( 50px );

perspective-origin: ( 〇〇 );

奥行きの起点となる位置を決めます。

• perspective-origin:(X軸の位置 Y軸の位置);

(例)
perspective-origin:(20px 40px);
perspective-origin:(50% 50%);
perspective-origin:(left center);

backface-visibility: 〇〇;

三次元になった際に裏面を可視化するかどうかを指定します。

(例)
backface-visibility: visible;  /可視化する/
backface-visibiliry: hidden;  /可視化しない/

---

今回は要素を変形させるCSSについてまとめました。
今後は実際にアニメーションを実装していきたいと思います。
最後までごらんいただきありがとうございました！