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