子要素に適用した変形は、3D 変形でも維持します:
div
{
-webkit-transform: rotateY(60deg); /* Chrome, Safari, Opera */
-webkit-transform-style: preserve-3d; /* Chrome, Safari, Opera */
transform: rotateY(60deg);
transform-style: preserve-3d;
}
Try it Yourself ❯
transform-style プロパティは、ネストした要素を 3D 空間でどのように描画するかを指定します。
注: このプロパティは、transform プロパティと 一緒に使用しなければなりません。
transform-style プロパティをより深く理解するために、 デモをご覧ください。
デフォルト値: | flat |
---|---|
継承: | 継承する |
アニメーション可否: | 不可。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- |
transform-style: flat|preserve-3d|initial|inherit;
プロパティ値 | 説明 |
---|---|
flat | デフォルト値。子要素は 3D の変形効果を維持しませんこれがデフォルトです |
preserve-3d | 子要素は 3D の変形効果を維持します |
initial | プロパティにデフォルト値を設定します。initial を参照 |
inherit | このプロパティは親要素を継承します。inherit を参照 |
CSS チュートリアル: CSS 2D Transforms
CSS チュートリアル: CSS 3D Transforms
HTML DOM リファレンス:transformStyle プロパティ