【css】3Dアニメーションの設定(transform-style、perspective)

cssを使って3Dアニメーションを設定するtransform-style、perspectiveについてまとめています。

サマリ

  • 3Dアニメーションをcssを実現するにはtransform-style、- perspectiveの2つのプロパティが必要
  • 3Dで動かしたい要素の親要素に設定する
  • 子要素にtransform: rotateX(90deg)など指定するとX軸方向にアニメーションさせることができる
  • rotate()はZ軸方向と意味が同じ
  • 回転の軸を親要素の最上段から始めたい場合は、transform-origin:top center;などと指定する