CSS - transform-style

トップ > CSSリファレンス > transform-style

概要

属性名 transform-style
flat | preserve-3d
初期値flat
適用可能要素トランスフォーム可能な要素
継承継承しない
メディアvisual
アニメーション不可

サポート (説明)

CSSIE/EdgeFirefoxChromeOperaSafari
3DCSS31210(-moz)
16
12(-webkit)
36
15(-webkit)
23
4(-webkit)
9

説明

transform で三次元変換した結果を、二次元的に表示するか、三次元的に表示するかを指定します。transform-style を指定した子要素に対してのみ有効です。IE11 ではサポートされていません。

説明
flat要素の子要素を三次元変換した結果を、二次元的に表示します。
preserve-3d要素の子要素を三次元変換した結果を、三次元的に表示します。

使用例

CSS
.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);
}
HTML
<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>
表示
flat
preserve-3d

例では、親要素(青)の上に子要素(緑)を表示しています。親要素(青)は rotateY() で Y軸を中心に 45度、子要素(緑)は rotateX() で X軸を中心に 45度回転させています。preserve-3d を指定した場合は三次元的に回転した結果が表示されますが、flat の場合は「三次元で回転させた結果は二次元的にはこうなるはず」の結果を表示するため、子要素(緑)は 45度傾けた分、親要素(青)よりも短く表示されています。

関連項目

transform, transform-origin, transform-style, perspective, perspective-origin, backface-visibility

リンク


Copyright (C) 2015 杜甫々
初版:2015年12月27日、最終更新:2015年12月27日
http://www.tohoho-web.com/css/prop/transform-style.htm