CSSで要素を変形させる

CSSアニメーションのkeyframesに要素の変形を組み合わせると、「パタッ」と要素が出現する、「くるっ」と要素が回転する、といったようなユニークな動きを実現することが可能である。

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

移動（translate）

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

回転（rotate）

transform: rotate(40deg);
transform: rotate3d(1, 1, 1, 45deg);
  • rotate(回転角度);
  • rotateX(X軸の回転角度);
  • rotateY(Y軸の回転角度);
  • rotateZ(Z軸の回転角度);
  • rotate3d(X軸, Y軸, Z軸, 回転角度);
    ※X軸, Y軸, Z軸には回転軸を表すベクトルの X, Y, Z座標を表し、0から1までの値を取る

伸縮（scale）

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

伸縮（skew）

transform: skew(50deg, 50deg);
  • skew(X軸の傾斜角度, Y軸の傾斜角度);
  • skewX(X軸の傾斜角度);
  • skewY(Y軸の傾斜角度);

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

transform-origin：要素の基点を指定する

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

transform-origin: (X軸の位置, Y軸の位置, Z軸の位置);
要素の中心の初期値は
2Dの場合 50%, 50%
3Dの場合 50%, 50%, 0

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

perspective: (50px);

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

perspective-origin：奥行きの起点となる位置を決める

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

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

backface-visibility：三次元になった際に裏面を可視化するかどうか

backface-visibility: visible; /* 可視化する */
backface-visibility: hidden; /* 可視化しない */
inserted by FC2 system