これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

CSStransform-style プロパティは、要素の子要素を 3D 空間に配置するのか、平面化して要素の平面に配置するのかを決定します。

平面化した場合、子要素は自身の 3D 空間に存在しなくなります。

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

構文

/* キーワード値 */
transform-style: flat;
transform-style: preserve-3d;

/* グローバル値 */
transform-style: inherit;
transform-style: initial;
transform-style: unset;

flat
要素の子要素を要素自身の平面上に配置することを示します。
preserve-3d
要素の子要素を 3D 空間に配置することを示します。

形式文法

flat | preserve-3d

仕様書

仕様書 策定状況 コメント
CSS Transforms Level 2
transform-style の定義
編集者草案 初回定義

初期値flat
適用対象変形可能要素
継承なし
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序
Creates stacking contextあり

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応12 -webkit-

12

12 -webkit-

16

10 -moz-

49 -webkit-

44 -webkit- 1

なし15 -webkit- あり -webkit-
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応3 -webkit- ?

あり

あり -webkit-

16

10 -moz-

49 -webkit-

44 -webkit- 1

あり -webkit- あり -webkit- ?

1. From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.

関連情報

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

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