例
変換された子要素が3D変換を維持してみましょう:
div
{
-webkit-transform: rotateY(60deg); /* Chrome, Safari, Opera */
-webkit-transform-style: preserve-3d; /* Chrome, Safari, Opera */
transform: rotateY(60deg);
transform-style: preserve-3d;
}
»それを自分で試してみてください 定義と使用法
変換-styleプロパティは、3D空間でレンダリングされるかネストされた要素を指定します。
Note:このプロパティは、一緒に使用する必要があります変換プロパティ。
より良い変換-styleプロパティを理解するには、 デモを見ます 。
デフォルト値: | flat |
---|---|
継承されました: | no |
アニメーション: | no. Read about animatable |
バージョン: | CSS3 |
JavaScriptシンタックス: | object .style.transformStyle="preserve-3d" Try it |
ブラウザのサポート
表中の数字は完全にプロパティをサポートする最初のブラウザのバージョンを指定します。
数字は-webkit-に続くかの接頭辞で働いていた最初のバージョンを指定します-moz-。
プロパティ | |||||
---|---|---|---|---|---|
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;
プロパティ値
プロパティ値 | 説明 |
---|---|
平らな | 子要素は、その3次元位置を保持しないことを指定します。 これがデフォルトです |
保存-3D | 子要素は、その3次元位置を保持することを指定します |
初期 | このプロパティがデフォルト値に設定します。 初期についての記事を読みます |
受け継ぎます | その親要素からこのプロパティを継承します。 継承についての記事を読みます |
関連ページ
CSSチュートリアル: CSS 2Dトランスフォーム
CSSチュートリアル: CSS 3Dトランスフォーム
HTML DOMリファレンス: transformStyle property