備忘録的プログラミングリファレンス

transform-style プロパティ

 transform-style プロパティは、親エレメント上に子エレメントを、回転、拡大/縮小、傾斜、移動した形で表示する CSS プロパティです。 3D状に表示することもできます。

立体的に表示
.parent {
	transform-style: preserve-3d;
}

.child {
	transform: rotateY(40deg) rotateZ(10deg);
}
詳しくはExample を参照を参照してください

 transform-style プロパティは親エレメントに指定します。親エレメントを基準に子エレメントが回転、拡大/縮小、傾斜、移動して表示されます。
 flat 値は親エレメント上に子エレメントが表示されます。preserve-3d 値は親エレメント上に子エレメントが立体的に表示されます。

 このプロパティは、エレメントの回転、拡大/縮小、傾斜、移動を指定するプロパティ transform と併せて使用します。

ページ内 Index

構文(Syntax)

CSS

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

DOM ( JavaScript )

値の取得
String = object.style.transformStyle;
値の設定
object.style.transformStyle="flat | preserve-3d | initial | inherit";

値(Values)

Value摘要
flat初期値(default値)、親エレメント上に表示
preserve-3d3D上に表示
initial初期値に戻す
inherit親エレメントのプロパティを継承

備考(Remarks)

初期値(Default value)flat
継承(Inherited)No
CSS AnimationNo

Example

 transform-style プロパティの例です。flat 値 と preserve-3d 値の違いを例で説明しています。
 transform-style プロパティは親エレメントに指定します。指定された親エレメントを基準に子エレメントが表示されます。

transform-style: flat;

 transform-style: flat;の場合のエレメントの回転例です。分かり難いですが、子エレメントが Y 軸方向を中心に40度、Z 軸方向に10度傾けて表示されています。
 float 値の場合は平面として表示されるのでエレメントを回転して表示の場合は分かり難いです。

transform-style: preserve-3d;

 transform-style: preserve-3d;の場合のエレメントの回転例です。子エレメントが Y 軸方向を中心に40度、Z 軸方向に10度傾けて表示されています。
 preserve-3d 値の場合は立体として表示されることが分かります。

 回転の中心は、transform-originプロパティで変更できます。