CSSリファレンス
実践向けCSSリファレンス

内包する要素を3Dで描画するかどうかを設定する

CSS - transform-style

概要

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>

仕様書

関連CSSプロパティ

閉じる