概要
CSSプロパティ｢transform-style｣は、要素の子要素が3D空間の中で、フラットに描画されるのか、立体的に描画されるのかを指定する際に使用します。またこのプロパティは継承されないため、適用したいプロパティには全てにセットする必要があります。
<div class="box">
<div class="transform">
<div class="child"></div>
</div>
</div>
<style>
div{
width: 100px;
height: 100px;
}
.box {
perspective: 500px;
border: 1px solid black;
}
.transform {
transform-style: preserve-3d;
transform: rotateY(50deg);
background-color: #ddd;
}
.child {
transform-origin: top left;
transform: rotateX(40deg);
background-color: #def;
}
</style>取りうる値
{ transform-style: 値; }| 値 | 説明 |
|---|---|
| flat | 初期値です。3D空間上で親要素と同一平面上に配置されます |
| preserve-3d | 子要素に指定した3D空間の変形が適用されます。親要素とは別の3D空間上で配置されます |
使用例
それぞれの値を指定て比べてみます。子要素の振る舞いに注意して確認してみてください。
<h1>flatを指定</h1>
<div class="box">
<div class="transform flat">
<div class="child"></div>
</div>
</div>
<h1>preserve-3d</h1>
<div class="box">
<div class="transform preserve-3d">
<div class="child"></div>
</div>
</div>
<style>
div{
height: 100px;
}
.box {
perspective: 500px;
border: 1px solid black;
}
.box .transform {
transform: rotateY(50deg);
background-color: #ddd;
}
.box .child {
transform-origin: top left;
transform: rotateX(40deg);
background-color: #def;
}
.preserve-3d {
transform-style: preserve-3d;
}
.flat {
transform-style: flat;
}
</style>