transform-style プロパティ
transform-style プロパティは、親エレメント上に子エレメントを、回転、拡大/縮小、傾斜、移動した形で表示する CSS プロパティです。 ３Ｄ状に表示することもできます。
.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-3d | ３Ｄ上に表示 |
| initial | 初期値に戻す |
| inherit | 親エレメントのプロパティを継承 |
備考（Remarks）
| 初期値（Default value） | flat |
| 継承（Inherited） | No |
| CSS Animation | No |
Example
transform-style プロパティの例です。flat 値 と preserve-3d 値の違いを例で説明しています。
transform-style プロパティは親エレメントに指定します。指定された親エレメントを基準に子エレメントが表示されます。
transform-style: flat;
transform-style: flat;の場合のエレメントの回転例です。分かり難いですが、子エレメントが Y 軸方向を中心に４０度、Z 軸方向に１０度傾けて表示されています。
float 値の場合は平面として表示されるのでエレメントを回転して表示の場合は分かり難いです。
transform-style: preserve-3d;
transform-style: preserve-3d;の場合のエレメントの回転例です。子エレメントが Y 軸方向を中心に４０度、Z 軸方向に１０度傾けて表示されています。
preserve-3d 値の場合は立体として表示されることが分かります。
回転の中心は、transform-originプロパティで変更できます。