CSS에서 3D 요소의 하단 위치를 지정하려면 perspective-origin 속성을 사용합니다. 이 속성은 3D 변형이 적용된 요소를 관찰하는 시점(원근감의 기준점)이 어디에 위치할지 결정하며, 이를 조절하면 요소가 화면에서 어떤 방향에서 보이는지 효과적으로 제어할 수 있습니다.
perspective-origin 속성이란?
perspective-origin은 부모 요소에 설정된 perspective 값과 함께 작동하여, 관찰자가 3D 공간을 바라보는 소실점(vanishing point)의 위치를 정의합니다. 기본값은 요소의 중앙인 50% 50%이며, 다음과 같은 값들을 사용할 수 있습니다.
- 키워드 값: left, right, top, bottom, center 등
- 백분율 값: 예를 들어
25% 75%처럼 X축과 Y축 위치를 각각 지정 - 길이 값: px, em 등 절대 단위로 지정
예제 코드
아래 예제는 perspective-origin 속성을 활용해 3D 요소의 원근 기준점을 왼쪽으로 설정하고, 자식 요소에 rotateX 변형을 적용한 코드입니다. 코드를 직접 실행해 결과를 확인해 보세요.
<!DOCTYPE html>
<html>
<head>
<style>
.demo1 {
position: relative;
width: 150px;
height: 150px;
background-color: yellow;
perspective: 80px;
margin: 50px;
perspective-origin: left;
}
.demo2 {
position: absolute;
padding: 20px;
background-color: orange;
transform-style: preserve-3d;
transform: rotateX(45deg);
}
</style>
</head>
<body>
<h1>Rotation</h1>
<div class="demo1">Demo
<div class="demo2">Demo
</div>
</div>
</body>
</html>코드 설명
위 예제의 핵심 포인트는 다음과 같습니다.
- .demo1 (부모 요소):
perspective: 80px로 원근 거리를 설정하고,perspective-origin: left로 원근 기준점을 왼쪽에 배치합니다. 노란색 배경은 3D 공간의 컨테이너 역할을 합니다. - .demo2 (자식 요소):
transform: rotateX(45deg)로 X축을 기준으로 45도 회전시켜 입체적인 효과를 만들고,transform-style: preserve-3d로 3D 공간을 유지합니다.
perspective-origin 값을 left 대신 right, top, bottom 또는 특정 좌표(예: 50% 100%)로 변경해 가면서 원근감이 어떻게 달라지는지 실험해 보면 속성의 동작 방식을 더 깊이 이해할 수 있습니다.