変形
transform-style
transform-style は、3D で動かした子要素を、自分と同じ 3D の空間に置くか、自分の面に平らに描き込むかを指定します。
構文
flat | preserve-3dプレビュー
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
perspective: 300px;
}
.box > :nth-child(2) {
transform: rotateY(50deg);
transform-style: preserve-3d;
}コントロール
transform-stylepreserve-3d
解説
値の意味
flat：初期値です。子を 3D で回したり手前に動かしたりしても、この要素の面に描いた絵のように平らになります。preserve-3d：子もこの要素と同じ 3D の空間に置かれ、要素の面から手前に浮いたり奥に沈んだりして見えます。
使いどころ
- 立方体のように何枚もの面を 3D に組み立てるときに、面を並べる親に
preserve-3dを書きます。 - 表と裏の 2 枚を重ねてめくれるカードを作るときに、2 枚の親に書きます（2 枚には
backface-visibility: hiddenを書きます）。
気をつけること
- 書くのは、3D で動かす子を持つ親です。遠近感は
perspectiveで付けます。このページでは箱に書いたperspectiveが、板だけでなく板の中の札にも効きます。 - 次の値があると、
preserve-3dを書いてもflatとして扱われます：overflowがvisible/clip以外、opacityが 1 未満、filter・clip-path・mask-imageがnone以外、mix-blend-modeがnormal以外、isolation: isolate、contain: paintなど。 preserve-3dを書いた要素は重なりの文脈（stacking context）を作り、position: fixedの子孫もこの要素を基準に置かれるようになります。
このページのプレビューでは、補助の宣言で箱に奥行き（perspective: 300px）を付け、板（2 番目の子）を縦の軸で 50 度回しています。板の中の赤い札には、見本の側で transform: translateZ(48px) を付けて手前に動かしてあります（コードには出ません）。flat では札が板の面に描き込まれ、preserve-3d では板から浮いて見えます。