CSS

The CSS `transform-style` property specifies whether the children of an element are affected by 3D transformations, with `flat` rendering them on a 2D plane and `preserve-3d` rendering them within a 3D space.

transform-style

　CSSの transform-styleプロパティは、要素の3D変換を適用する際に、その子要素の変換が親要素の変換空間に入るかどうかを指定します。このプロパティは、3D空間での子要素の描画方法を制御します。

　transform-styleプロパティには以下の2つの値があります。

flat
子要素は2D平面上で描画されます。親要素の変換空間に影響されず、通常の2Dレイアウトのように扱われます。
preserve-3d
子要素は3D空間内で描画されます。親要素の変換空間を保持し、子要素の変換も3D空間内で行われます。

使用例

CSS

.parent {
	transform: rotateY(30deg);
	transform-style: preserve-3d;
}
.child {
	transform: translateZ(100px);
}

　上記の例では、親要素に対してY軸回転を適用し、その変換スタイルを preserve-3dに設定しています。これにより、子要素の translateZ(100px)が3D空間内で適用され、立体的な配置が実現されます。

実際の効果

flatの場合
子要素の変換は2Dのままで、親要素の回転は無視されます。
preserve-3dの場合
子要素も3D空間内で変換され、親要素の回転の影響を受けます。

　これにより、3D変換を駆使した複雑なアニメーションやインタラクティブなデザインが可能になります。

Sample

Flat
Preserve-3D

HTML

<div class="container">
	<div class="parent flat">
		<div class="child">Flat</div>
	</div>
	<div class="parent preserve-3d">
		<div class="child">Preserve-3D</div>
	</div>
</div>

CSS

.container {
	display: flex;
	gap: 1em;
	justify-content: space-around;
	margin: 30px auto;
}
.parent {
	animation: parent-rotate 5s infinite;
	border: 1px solid gray;
	height: 200px;
	perspective: 800px;
	width: 200px;
}
.child {
	background-color: lightblue;
	height: 100px;
	margin: auto;
	transform: translateZ(50px);
	width: 100px;
}
.flat {
	transform-style: flat;
}
.preserve-3d {
	transform-style: preserve-3d;
}
@keyframes parent-rotate {
	0% {
		transform: rotateY(0deg);
	}
	50% {
		transform: rotateY(180deg);
	}
	100% {
		transform: rotateY(360deg);
	}
}

説明

  1. 親要素には perspectiveを設定し、3D効果を出します。また、親要素自体がY軸を中心に回転するアニメーションを追加しています。
  2. 子要素には translateZ(50px)を設定し、Z軸方向に50ピクセル移動させます。
  3. 1つ目の親要素には transform-style: flat; を設定し、2つ目の親要素には transform-style: preserve-3d; を設定します。

結果

　このサンプルにより、flatと preserve-3dの違いが明確に視覚的に確認できると思います。