CSS perspective 속성이란?
CSS의 perspective 속성을 사용하면 3D 요소가 화면에 표시되는 방식, 즉 원근감(깊이감)을 지정할 수 있습니다. 이 속성은 3D 변형(transform)이 적용된 요소를 마치 실제 공간에서 바라보는 것처럼 입체적으로 렌더링해 줍니다.
perspective 값이 작을수록 관찰자가 요소에 가까이 있는 것처럼 표현되어 원근 효과가 강조되고, 값이 클수록 멀리서 보는 듯한 느낌으로 원근 효과가 약해집니다.
사용 예제
아래 코드는 perspective 속성과 함께 transform을 조합하여 3D 회전 효과를 구현하는 예시입니다.
<!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;를 설정하여 자식 요소의 3D 효과에 원근감을 부여합니다. - .demo2 (자식 요소):
transform-style: preserve-3d;로 3D 공간을 유지하며,rotateX(45deg)를 통해 X축을 기준으로 45도 회전합니다.
이처럼 부모 요소에 perspective를 지정하면 자식 요소의 3D 변형이 한결 자연스러운 입체감을 갖게 됩니다.