CSS 参考手册

CSS @规则(RULES)

CSS 属性大全

CSS3 transition 属性 CSS3 transform-origin 属性

CSS3 transform-style属性の使用方法および例

transform-style CSS属性で指定された要素の子要素は、以下の場所に配置されます3D空間内で配置されるか、要素の平面内でタイルされるかを指定します。タイル化される場合、子要素は三次元空間で独立して存在しません。

この属性は、以下の要素にのみ適用されますtransform指定された属性の子要素。

以下のテーブルには、この属性の使用方法とバージョンハイストリを示し、JavaScriptスクリプト内での使用文法も含まれています。

デフォルト値：	flat
適用範囲：	変形可能要素
継承：	ありません
アニメーション可能：	いいえ。参照してくださいアニメーション属性。
バージョン：	CSS3の新機能
JavaScript文法：	object.style.transformStyle="preserve-3d"

transform-styleの使用文法

この属性の文法は以下の通りです：

transform-style:　flat　|　preserve-3d　|　initial　|　inherit

以下の例では、transformの使用方法を示しています。-style属性。

例

img　{
　　　　/*　Chrome、Safari、Opera　*/
　　　　-webkit-transform:　rotate(30deg);
　　　　-webkit-transform-style:　preserve-3d;
　　　　/*　Firefox　*/
　　　　-moz-transform:　rotate(30deg);
　　　　-moz-transform-style:　preserve-3d;
　　　　/*　IE　9　*/
　　　　-ms-transform:　rotate(30deg);
　　　　-ms-transform-style:　preserve-3d;
　　　　
　　　　transform:　rotate(30deg);
　　　　transform-style:　preserve-3d;
}

試してみる‹/›

属性値

以下のテーブルは、この属性の値を説明しています。

値	説明
flat	要素の子要素はフラット化され、要素自身の平面内に位置します。これはデフォルトの値です。
preserve-3d	要素の子要素は、以下の場所に配置されるべきです3D空間内。
initial	この属性をデフォルト値に設定します。
inherit	指定された場合、関連する要素は親要素のtransformを使用します-styleの属性値。

ブラウザ互換性

transform-style属性のブラウザの互換性について、以下のテーブルには、この属性をサポートするブラウザの最低バージョン番号が示されています；すべての主要ブラウザがこの属性をサポートしています。

	Firefox 10+ ^-moz-、16 + Chrome 12+ ^-webkit-、36+ Internet Explorer 11+ Apple Safari 4+ ^-webkit- Opera 15+ 　 ^-webkit-、23+

さらに詳しく

以下のチュートリアルを参照してください：CSS3 2D変換、CSS3 3D変換

CSS3 transition 属性 CSS3 transform-origin 属性