CSS3 transform-style プロパティ

❮ 前章へ 完全な CSS リファレンス 次へ ❯

子要素に適用した変形は、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-

CSS 構文

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 プロパティ


❮ 前章へ 完全な CSS リファレンス 次へ ❯