CSS変換スタイルのプロパティ
例
変換された子要素が3D変換を保持するようにします。
div
{
transform: rotateY(60deg);
transform-style: preserve-3d;
}
定義と使用法
このtransform-style
プロパティは、ネストされた要素が3D空間でどのようにレンダリングされるかを指定します。
注:このプロパティは、 transformプロパティと一緒に使用する必要があり ます。
transform-style
プロパティ
をよりよく理解するには、デモを表示してください。
デフォルト値: | 平らな |
---|---|
遺伝性の: | いいえ |
アニメート可能: | 番号。アニメート可能について読む |
バージョン: | CSS3 |
JavaScript構文: | オブジェクト.style.transformStyle = "preserve-3d" |
ブラウザのサポート
表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。
数字の後に-webkit-または-moz-が続く場合は、プレフィックスを使用して機能した最初のバージョンを指定します。
Property | |||||
---|---|---|---|---|---|
transform-style | 36.0 12.0 -webkit- |
11.0 | 16.0 10.0 -moz- |
9.0 4.0 -webkit- |
23.0 15.0 -webkit- |
CSS構文
transform-style: flat|preserve-3d|initial|inherit;
プロパティ値
Property Value | Description |
---|---|
flat | Specifies that child elements will NOT preserve its 3D position. This is default |
preserve-3d | Specifies that child elements will preserve its 3D position |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
関連ページ
CSSチュートリアル:CSS2D変換
CSSチュートリアル:CSS3D変換
HTML DOMリファレンス:transformStyleプロパティ