読者です 読者をやめる 読者になる 読者になる

Browser

Microsoft Edge(Project Spartan, Internet Explorer) 、ブラウザ周辺、Web フロントエンド開発、UI、など

Microsoft Edge まとめページ

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

Microsoft Edge 開発 CSS

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

f:id:x67x6fx74x6f:20150728124630g:plain

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

 

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

 

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

f:id:x67x6fx74x6f:20150728124607p:plain

 

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

 

スポンサーリンク