We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

これは実験段階の機能です。
この機能は複数のブラウザーで開発中の状態にあります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザーの将来のバージョンで変更になる可能性があることに注意してください。

概要

CSStransform-style プロパティは、要素の子要素が 3D 空間に配置されるのか、平らにされて要素の面上に配置されるのかを決めます。

平らにされるなら、子要素自身は 3D 空間に存在しなくなります。

このプロパティは継承されないため、葉要素でないすべての子孫要素でセットする必要があります。

初期値flat
適用対象変形可能要素
継承不可
メディアvisual
計算値指定値
Animation typediscrete
正規順序形式文法で定義される一意のあいまいでない順序
Creates stacking context継承する

構文

形式文法: flat | preserve-3d
transform-style: preserve-3d
transform-style: flat

transform-style: inherit

preserve-3d
要素の子要素を 3D 空間に配置することを示すキーワードです。
flat
要素の子要素を要素自身の面上に置くことを示すキーワードです。

---

仕様

仕様書 策定状況 コメント
CSS Transforms Level 1
transform-style の定義
草案  

ブラウザ実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート 12-webkit 10 (10)-moz
16 (16)
未サポート # 未サポート (有)-webkit
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート 3.0-webkit 10.0 (10)-moz
16.0 (16)
? 未サポート (有)-webkit

関連情報

ドキュメントのタグと貢献者

このページの貢献者: fscholz, Sebastianz, ethertank, sosleepy
最終更新者: fscholz,