Miobiki

  1. HOME
  2. css
  3. CSS 3Dに触れる

CSS 3Dに触れる

目次

以前、表現の幅を広げようとWebGLを使った3Dの勉強をしたことがありましたが、高尚すぎて挫折した経験があります。
そんな中、CSSで3D表現ができると知ったのでどんな感じなんだろうと思い試してみました。

作ったもの

iPhone safariのタブの一覧です。

https://codepen.io/nao5151/pen/qoNBbz
完コピではありません。だいぶ手抜きです…
cssの3Dをちょっと試したかっただけなので、今回はこれでよいと思います…

感想

予想以上に簡単でした。
普段と違う点はperspectiveプロパティぐらいでしょうか。親要素にperspectiveを設定してしまえば、あとはtransformが3Dになるので楽チンですね。

perspectiveプロパティ

perspective CSS プロパティは、3D 配置された要素に遠近感を与えるため、z=0 平面とユーザ間の距離を決めます。z>0 である 3D 要素はより大きく、z<0 である 3D 要素はより小さくなります。効果の強度はこのプロパティの値から決められます。

https://developer.mozilla.org/ja/docs/Web/CSS/perspective

perspectiveの値によって3Dぐあいが変わってくるということですね。

ブラウザサポート

https://caniuse.com/#feat=transforms3d
モダンブラウザなら対応しています。
ですが、IE11ではtransform-style: preserve-3dが対応していないみたいです。transform-styleの挙動はmicrosoftのドキュメントのデモが分かりやすかったです。
https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/dev-guides/hh673529(v=vs.85)#the-transform-style-property

今回codepenで作ったものに関しては子要素に3Dは使用していないのでIE11でも同じ見た目になります。

最後に

3DがCSSのみで表現できることで、ぐっと身近なものに感じました。
他の人の作品をいろいろみてると、そんなものまで作れるのかというのもあり刺激されます。 これを機にthree.jsにも挑戦してみようかなと。

CSS 3Dが気になった人は、コチラを参考にどうぞ。
http://desandro.github.io/3dtransforms/
(英語ですが)ドキュメントからサンプルまであり、大変参考になりました。