CSS transform-style 属性

定義と使用方法

transform-style 属性は、3D 空間内でネストされた要素をどのように表示するかを定義します。

注釈：この属性は、以下の属性と一緒に使用する必要があります： transform 属性と一緒に使用してください。

参照もしてください：

CSS3 ガイド：CSS3 2D 转换

CSS3 ガイド：CSS3 3D 转换

HTML DOM リファレンスマニュアル：transformStyle 属性

例

変換された子要素がその 3D 変換を保持するようにします：

div {
  transform: rotateY(60deg);
  transform-style: preserve-3d;
}

実際に試してみてください

CSS ガイド

transform-style: flat|preserve-3d;

属性値

値 説明
フラット 子要素はその 3D 位置を保持しません。
preserve-3d 子要素はその 3D 位置を保持します。

技術的詳細

デフォルト値： フラット
継承性： いいえ
バージョン： CSS3
JavaScript ガイド： object.style.transformStyle="preserve-3d"

ブラウザのサポート

テーブルの数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。

前缀を使用する最初のバージョンの数字を示す -webkit- または -moz- があります。

Chrome IE / Edge Firefox Safari Opera
36.0
12.0 -webkit-		 11.0 16.0
10.0 -moz-		 9.0
4.0 -webkit-		 23.0
15.0 -webkit-