CSS

The CSS `perspective` property sets the distance from the viewer to the element, adjusting the depth perception for 3D effects.

perspective

　CSSの perspectiveプロパティは、3D変換を行う要素の奥行きを設定するために使用されます。このプロパティは、3D空間での視点の距離を指定し、要素がどの程度の奥行きを持って表示されるかを制御します。視点が近いほど、3D効果が強調され、視点が遠いほど、3D効果が減少します。

使用方法

　perspectiveプロパティは主に2つの方法で設定できます

コンテナに対して設定する方法

コンテナ要素に対して perspectiveを設定することで、そのコンテナ内の子要素に対して3D効果を適用します。

CSS

.container {
	perspective: 1000px;
}
.child {
	transform: rotateY(45deg);
}

個別の要素に対して設定する方法

perspective()関数を使用して、個別の要素に対して直接設定することもできます。

CSS

.element {
	transform: perspective(1000px) rotateY(45deg);
}

注意点

• perspectiveプロパティはpx単位で指定します。
• 値が小さいほど、視点が近くなり、3D効果が強くなります。逆に、値が大きいほど、視点が遠くなり、3D効果が弱くなります。
• perspectiveを適用する要素には transformプロパティも併用する必要があります。

Sample

<div class="container">
	<div class="parent px300">
		<div class="child">perspective<br>300px</div>
	</div>
	<div class="parent px1200">
		<div class="child">perspective<br>1200px</div>
	</div>
</div>

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