これは実験段階の機能です。
この機能は複数のブラウザで開発中の状態にあります。各ブラウザで用いるために、適切なベンダー接頭辞が必要な場合があります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。
概要
CSS の transform-style プロパティは、要素の子要素が 3D 空間に配置されるのか、平らにされて要素の面上に配置されるのかを決めます。
平らにされるなら、子要素自身は 3D 空間に存在しなくなります。
このプロパティは継承されないため、葉要素でないすべての子孫要素でセットする必要があります。
| 初期値 | flat |
|---|---|
| 適用対象 | 変形可能要素 |
| 継承 | 不可 |
| メディア | visual |
| 計算値 | 指定値 |
| アニメーションの可否 | 不可 |
| 正規順序 | 形式文法で定義される一意のあいまいでない順序 |
| Creates stacking context | 継承する |
構文
形式文法: flat | preserve-3d
transform-style: preserve-3d transform-style: flat transform-style: inherit
値
preserve-3d- 要素の子要素を 3D 空間に配置することを示すキーワードです。
flat- 要素の子要素を要素自身の面上に置くことを示すキーワードです。
例
---
仕様
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| CSS Transforms Level 1 The definition of 'transform-style' in that specification. |
草案 |
ブラウザ実装状況
| 機能 | 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 |