CSS - transform-style

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

概要

サポート (説明)

説明

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

使用例

.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);
}

<h3>flat</h3>
<div class="container">
 <div class="parent" style="transform-style:flat;">
  <div class="child">
  </div>
 </div>
</div>
<h3>preserve-3d</h3>
<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度傾けた分、親要素(青)よりも短く表示されています。

関連項目

リンク

• https://www.w3.org/TR/2009/WD-css3-3d-transforms-20090320/
• http://www.w3.org/TR/css-transforms-1/#transform-style-property
• https://developer.mozilla.org/ja/docs/Web/CSS/transform-style
• http://caniuse.com/#feat=transforms3d