CSS ・ アニメーション
transform-style
子要素を3D空間のまま表示する
CSS で 3D を再現するために必要なプロパティです。preserve-3d を指定すると、子要素の 3D 変換が平面に押しつぶされず、立体のまま表示されます。
01
サンプルコード
HTML
1<div class="scene">
2 <div class="cube">
3 <div class="face front">前</div>
4 <div class="face right">右</div>
5 <div class="face top">上</div>
6 </div>
7</div>
CSS
1.scene {
2 perspective: 600px;
3 padding: 40px 60px;
4}
5.cube {
6 position: relative;
7 width: 80px;
8 height: 80px;
9 transform-style: preserve-3d;
10 transform: rotateX(-25deg) rotateY(-35deg);
11}
12.face {
13 position: absolute;
14 inset: 0;
15 display: grid;
16 place-items: center;
17 color: #fff;
18 font-size: 14px;
19}
20.front {
21 background: #b68235;
22 transform: translateZ(40px);
23}
24.right {
25 background: #7d5411;
26 transform: rotateY(90deg) translateZ(40px);
27}
28.top {
29 background: #e1ad66;
30 transform: rotateX(90deg) translateZ(40px);
31}
02
実行結果
ブラウザでの表示3つの面が立体の箱として表示されます。.cube の transform-style を flat にすると、面が平らに重なって箱に見えなくなります
03
解説
transform-style は、子要素の 3D 変換を 3D 空間のまま保つかどうか を決めるプロパティです。
初期値の flat では、子要素を 3D で回転させても、親要素の平面の上に押しつぶされて表示されます。preserve-3d にすると、子要素どうしの前後関係も含めて立体のまま表示されるので、箱やカードの裏表のような表現ができます。
書くのは 3D 変換する子要素を持つ親要素 です。奥行きを付ける perspective は、さらにその外側（祖先の要素）に書きます。
04
応用例・注意点
指定できる値
| 値 | 説明 |
|---|---|
flat | 初期値。子要素を平面として表示する |
preserve-3d | 立体を表現できるようになる。子要素の 3D 変換を 3D 空間で保持したいときに使う |
ホバーでカードを裏返す
表と裏の2枚を重ね、親に preserve-3d を指定して rotateY(180deg) で回転させます。backface-visibility: hidden で裏を向いた面を隠します。
HTML
1<div class="scene">
2 <div class="card">
3 <div class="side front">表（マウスを乗せる）</div>
4 <div class="side back">裏</div>
5 </div>
6</div>
CSS
1.scene {
2 perspective: 800px;
3 padding: 10px 30px;
4}
5.card {
6 position: relative;
7 width: 200px;
8 height: 90px;
9 transform-style: preserve-3d;
10 transition: transform .6s ease;
11}
12.scene:hover .card {
13 transform: rotateY(180deg);
14}
15.side {
16 position: absolute;
17 inset: 0;
18 display: grid;
19 place-items: center;
20 color: #fff;
21 font-size: 13px;
22 backface-visibility: hidden;
23}
24.front {
25 background: #b68235;
26}
27.back {
28 background: #7d5411;
29 transform: rotateY(180deg);
30}
注意点
- 01overflow: hidden や opacity（1 未満）を指定した要素では、preserve-3d が効かず flat として扱われます。
- 02transform-style は継承しません。孫要素まで立体にしたいときは、間の要素にもそれぞれ指定します。