HTML DOM의 Style perspective 속성은 HTML 문서 내에서 3D 요소가 어떻게 보이는지를 확인하고 수정할 수 있는 기능을 제공합니다. 이 속성을 활용하면 요소에 원근감(perspective)을 부여하여 입체적인 시각 효과를 쉽게 구현할 수 있습니다.
문법(Syntax)
perspective 속성의 기본 문법은 다음과 같습니다.
1. perspective 값 가져오기
object.perspective
2. perspective 값 설정하기
object.perspective = "value"
여기서 value에 사용할 수 있는 값은 다음과 같습니다.
| 값 | 설명 |
|---|---|
| initial | 이 속성의 값을 기본(default) 값으로 설정합니다. |
| inherit | 부모 요소로부터 이 속성의 값을 상속받습니다. |
| none | 원근감(perspective)을 설정하지 않습니다. |
| length | 길이 단위(px 등)를 사용하여 요소가 뷰(view)로부터 얼마나 떨어져 있는지 지정합니다. |
그럼 실제 예제를 통해 HTML DOM Style perspective 속성이 어떻게 동작하는지 살펴보겠습니다.
예제(Example)
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem auto;
}
.box {
text-align: center;
width: 200px;
height: 200px;
background-color: #db133a;
transform: rotateX(25deg);
margin: 2rem auto;
}
</style>
<body>
<h1 style="text-align:center">DOM Style perspective Property Demo</h1>
<div class='box'></div>
<button class="btn" onclick="set()">Set Perspective</button>
<script>
function set() {
document.body.style.perspective = "100px";
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행한 후 “Set Perspective” 버튼을 클릭해 보세요. 그러면 빨간색 박스에 perspective 값(100px)이 적용되면서 X축으로 기울어진 3D 원근 효과가 화면에 나타납니다.
정리
HTML DOM Style perspective 속성은 CSS의 perspective 속성을 JavaScript로 제어할 수 있게 해주는 강력한 도구입니다. 특히 3D 변환(transform)과 함께 사용하면 카드 뒤집기, 회전 애니메이션 등 다양한 입체적인 UI 효과를 동적으로 구현할 수 있습니다.