属性名 | transform-style |
---|---|
値 | flat | preserve-3d |
初期値 | flat |
適用可能要素 | トランスフォーム可能な要素 |
継承 | 継承しない |
メディア | visual |
アニメーション | 不可 |
CSS | IE/Edge | Firefox | Chrome | Opera | Safari | |
---|---|---|---|---|---|---|
3D | CSS3 | 12 | 10(-moz) 16 | 12(-webkit) 36 | 15(-webkit) 23 | 4(-webkit) 9 |
transform で三次元変換した結果を、二次元的に表示するか、三次元的に表示するかを指定します。transform-style を指定した子要素に対してのみ有効です。IE11 ではサポートされていません。
値 | 説明 |
---|---|
flat | 要素の子要素を三次元変換した結果を、二次元的に表示します。 |
preserve-3d | 要素の子要素を三次元変換した結果を、三次元的に表示します。 |
.container { width: 60px; height: 60px; perspective: 200px; border: 1px solid #999; margin-top: 5px; } .parent { width: 60px; height: 60px; transform: rotateY(45deg); background: rgba(0, 0, 255, 0.7); } .child { width: 60px; height: 60px; transform-origin: top left; transform: rotateX(45deg); background: rgba(0, 255, 0, 0.7); }
<h5>flat</h5> <div class="container"> <div class="parent" style="transform-style:flat;"> <div class="child"> </div> </div> </div> <h5>preserve-3d</h5> <div class="container"> <div class="parent" style="transform-style:preserve-3d;"> <div class="child"> </div> </div> </div>
例では、親要素(青)の上に子要素(緑)を表示しています。親要素(青)は rotateY() で Y軸を中心に 45度、子要素(緑)は rotateX() で X軸を中心に 45度回転させています。preserve-3d を指定した場合は三次元的に回転した結果が表示されますが、flat の場合は「三次元で回転させた結果は二次元的にはこうなるはず」の結果を表示するため、子要素(緑)は 45度傾けた分、親要素(青)よりも短く表示されています。