3D 요소가 화면에서 어떻게 보이는지, 즉 원근감(깊이감)을 지정하려면 CSS의 perspective 속성을 사용합니다.
perspective 속성의 역할
perspective 속성은 관찰자와 z=0 평면 사이의 거리를 정의하여, 3D 변형된 요소에 입체적인 깊이감을 부여합니다.
- 값이 작을수록 – 관찰자가 요소에 가까운 것처럼 표현되어 원근 효과가 더 강하게 나타납니다.
- 값이 클수록 – 멀리서 바라보는 듯한 효과로 원근감이 약해집니다.
- 기본값(none) – 원근 효과가 적용되지 않습니다.
또한 이 속성은 3D 변형이 적용되는 요소의 부모 요소에 선언해야 하며, 자식 요소가 3D 공간을 유지하도록 transform-style: preserve-3d;와 함께 사용하면 더욱 자연스러운 입체 효과를 얻을 수 있습니다.
예제 코드
아래 코드를 직접 실행하여 perspective 속성이 실제로 어떻게 동작하는지 확인해 보세요.
<!DOCTYPE html>
<html>
<head>
<style>
.demo1 {
position: relative;
width: 150px;
height: 150px;
background-color: yellow;
perspective: 80px;
margin: 50px;
}
.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;를 지정해 자식 요소에 강한 원근 효과를 적용합니다. - .demo2 – 주황색 내부 요소로,
transform: rotateX(45deg);덕분에 X축을 기준으로 45도 회전되어 입체적으로 뒤로 눕혀진 모습으로 표시됩니다.
이처럼 perspective 속성 하나만 추가해도 단순한 2D 회전과 달리 훨씬 현실적인 3D 효과를 구현할 수 있습니다.