JavaScript로 3D 요소가 보이는 원근감을 설정하려면 perspective 속성을 사용하면 됩니다.
perspective 속성이란?
perspective 속성은 3D 변형된 요소를 관찰하는 시점의 깊이를 결정합니다. 값이 작을수록 관찰자가 요소에 가까운 것처럼 표현되어 원근 효과가 강해지고, 값이 클수록 원근 효과가 약해집니다. 이 속성은 일반적으로 rotateX(), rotateY() 같은 3D 변형 함수와 함께 사용됩니다.
예제
다음 코드를 실행한 뒤 버튼을 클릭하면, div1 요소의 perspective 값이 90px로 변경되면서 내부의 3D 요소들이 보이는 방식이 어떻게 달라지는지 확인할 수 있습니다.
<!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 = "myFunction()">원근 설정</button>
<div id = "div1">DIV1
<div id = "div2">DIV2</div>
<div id = "div3">DIV3</div>
</div>
<script>
function myFunction() {
document.getElementById("div1").style.perspective = "90px";
}
</script>
</body>
</html>