3D 요소의 하단 위치를 설정하려면 JavaScript의 perspectiveOrigin 속성을 사용하면 됩니다. 이 속성은 원근(perspective)이 적용된 3D 공간에서 관찰자의 시점이 위치하는 지점을 지정하며, 이 값을 조절하면 요소를 마치 아래쪽에서 바라보는 듯한 입체적 효과를 연출할 수 있습니다.
동작 원리
perspectiveOrigin 속성은 두 개의 값을 받습니다. 첫 번째 값은 X축(수평) 위치, 두 번째 값은 Y축(수직) 위치를 나타냅니다. Y축 값을 '100%' 또는 픽셀 단위로 크게 설정하면 시점이 요소의 하단으로 이동하여, 3D로 회전된 자식 요소들이 아래에서 올려다보는 것처럼 보이게 됩니다.
예제
아래 코드를 실행하고 버튼을 클릭하면 JavaScript로 div 요소의 perspective-origin 값이 변경되는 것을 확인할 수 있습니다. 이 예제에는 세 개의 div 요소가 사용됩니다 −
- DIV1: 원근(perspective: 100px)을 적용하는 부모 컨테이너
- DIV2: X축으로 45도 회전된 노란색 요소
- DIV3: X축으로 30도 회전된 초록색 요소
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
position: relative;
margin: auto;
height: 200px;
width: 200px;
padding: 20px;
border: 2px solid blue;
perspective: 100px;
}
#div2 {
padding: 80px;
position: absolute;
border: 2px solid blue;
background-color: yellow;
transform: rotateX(45deg);
}
#div3 {
padding: 50px;
position: absolute;
border: 2px solid blue;
background-color: green;
transform: rotateX(30deg);
}
</style>
</head>
<body>
<p>div 속성 변경</p>
<button onclick = "display()">원근 원점 위치 설정</button>
<div id = "div1">DIV1
<div id = "div2">DIV2</div>
<div id = "div3">DIV3</div>
</div>
<script>
function display() {
document.getElementById("div1").style.perspectiveOrigin = "20px 10%";
}
</script>
</body>
</html>코드 설명
버튼을 클릭하면 display() 함수가 호출되고, getElementById()로 선택한 DIV1의 perspectiveOrigin 값이 "20px 10%"로 변경됩니다. 이때 X축 방향으로 20px, Y축 방향으로 컨테이너 높이의 10% 지점에 시점이 설정되어, 내부의 3D 회전 요소들이 보는 각도가 실시간으로 달라지는 것을 확인할 수 있습니다.
만약 시점을 요소의 정확히 하단에 맞추고 싶다면 두 번째 값을 "50% 100%"처럼 지정하면 됩니다. 이렇게 하면 수평 중앙, 수직 하단에서 3D 요소를 바라보는 효과가 적용됩니다.