CSS

The `perspective-origin` property in CSS sets the position of the viewpoint in a 3D transformation, determining from which direction the element is viewed.

perspective-origin

　CSSの perspective-originプロパティは、3D変換の視点の位置を設定するためのプロパティです。このプロパティを使用すると、要素に対して適用される3D変換の視点の基準点を変更できます。

基本的なポイント

プロパティの役割
perspective-originは、3Dシーンを見る視点（カメラ）の位置を指定します。
これにより、要素の変換がどの方向から見られるかが変わります。
指定方法
値は、X軸とY軸の2つの方向を指定します。例えば、perspective-origin: 50% 50%;は、要素の中央を視点の基準点として設定します。
単位としてはパーセント（%）やピクセル（px）などが使用できます。
デフォルト値
デフォルト値は50% 50%です。これは要素の中央を視点の基準点にします。

Sample

0%
0%
100%
100%

HTML

<div class="container">
	<div class="parent p0">
		<div class="child">0%<br>0%</div>
	</div>
	<div class="parent p100">
		<div class="child">100%<br>100%</div>
	</div>
</div>

CSS

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