変形

要素を移動・回転・拡縮させるスタイル。

デモ

移動

• 要素を単純に移動させる。主にアニメーションと併用。

回転

• 要素を回転させる。度数で指定。
• 回転は 3D （ x 軸、 y 軸、 z 軸）でも指定できる。
• 回転のわかりやすいデモ。

拡縮

• 要素を拡大・縮小させる。割合で指定。
• 負数を指定することで反転させることも可能。

複合

• 移動・回転・拡縮は複合させることもできる。

中心点

• 中心点はデフォルトで上下中央。
• 意図的にずらすことでアニメーションの表現に幅を持たせることができる。

注意

• 移動・回転・角度の他に傾斜（ skew ）させることもできたが、廃止された。
  環境によってはいまだに対応しているが、将来的にはすべての環境で対応しなくなるので使用禁止。
• 3D 回転は内部で GPU （グラフィックボード）を使用するため、若干コストが高い。
• 3D 移動と 3D 拡縮もあるが、用途が思いつかないため割愛。

応用例

See the Pen 3D Carousel Gallery by Dudley Storey (@dudleystorey) on CodePen.