Microsoft Edge の機能を調べてみた - CSS Preserve-3d 編

やっと入った CSS Preserve-3d。
現状、モダンブラウザで WebGL が動くため使用頻度は少なくなるかもしれませんが、簡単な 3D の表現を行う場合にはこちらの方が手軽にできるケースもあると思われます。

上が Edge、下が Internet Explorer 11。 IE は Preserve-3d が使えないため平面で表示されてしまっています。 

transform-style: preserve-3d を設定すると transform プロパティで使用する 移動、回転、拡縮が 3D 空間で描画され奥行きのある絵をつくることができます。
また、transform: perspective(数値) で 3D 空間での奥行きの深さを変更することができます。

アドレスバー about:flags 入力後出現する「開発者向け設定」内の
「preserve-3d コンテンツで独立型の合成を使ってパフォーマンスを向上させる」のチェックを入れると若干動きがよくなります。

ちなみにこちらとか Edge では表示が欠けてしまうので、まだまだというとことではあります。