動くWebデザイン
アイディア帳

HTMLの要素を変形させる代表的なCSSの指定方法を紹介します。
CSSアニメーションのkeyframesに要素の変形を組み合わせると、「パタッ」と要素が出現する、「くるっ」と要素が回転する、といったようなユニークな動きを実現することが可能です。

See the Pen CSSで要素を変形させよう by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.

「Result」下のRerunを押して動きを確かめてね！↑

1. transform: ●●;

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

1-1. 移動

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

記述例： transform:translate(50px,50px);

1-2. 回転

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

記述例： transform:rotate(40deg);

1-3. 伸縮

scale(伸縮の数値);
scaleX(X軸の伸縮の数値);
scaleY(Y軸の伸縮の数値);
scaleZ(Z軸の伸縮の数値);
scale3d(X軸の伸縮の数値,Y軸の伸縮の数値,Z軸の伸縮の数値);

記述例： transform:scale(1.1);

1-4. 傾斜

skew(X軸の傾斜角度,Y軸の傾斜角度);
skewX(X軸の傾斜角度);
skewY(Y軸の傾斜角度);

※ 傾斜はZ軸なし。2Dのみ

記述例： transform:skew(50deg,50deg);

2. transform-origin:(●●)；

・・・要素の基点を指定する。

transform-origin:(X軸の位置,Y軸の位置,Z軸の位置);

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

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

3. perspective: (●●)；

・・・要素に対して遠近感を設定する

perspective:(値);

※指定した要素だけに効果を適応させたい場合は、transformの中に書きます。
　transform:perspective(値);

記述例： perspective:(50px);

4. perspective-origin: (●●)；

・・・奥行きの起点となる位置を決める

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

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

5. backface-visibility: ●●；

・・・三次元になった際に裏面を可視化するかどうか

記述例：backface-visibility: visible;　/可視化する/
　　　　backface-visibility: hidden;　/可視化しない/