CSS의 perspective(원근) 속성은 3D 변형 요소에 깊이감을 부여하는 중요한 속성입니다. 이 속성의 값은 애니메이션으로도 조작할 수 있으며, @keyframes 규칙과 함께 사용하면 원근 거리가 부드럽게 변화하는 입체적인 시각 효과를 만들 수 있습니다.
perspective 속성이란?
perspective 속성은 관찰자와 z축 평면 사이의 거리를 정의하여, 3D로 배치된 자식 요소에 원근감을 적용합니다. 값이 작을수록 관찰자가 요소에 가까워진 것처럼 보여 왜곡 효과가 강해지고, 값이 클수록 원근감이 약해집니다.
예제 코드
아래 예제는 perspective 속성에 애니메이션을 적용한 코드입니다. 3초 주기로 무한 반복되며, 애니메이션 진행률 50% 지점에서 perspective 값이 200px에서 100px로 변경됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
#demo1 {
position: relative;
margin-left: 120px;
height: 250px;
width: 350px;
padding: 10px;
border: 1px solid orange;
animation: myanim 3s infinite;
perspective: 200px;
}
@keyframes myanim {
50% {
perspective: 100px;
}
}
#demo2 {
padding: 90px;
position: absolute;
border: 1px solid black;
background-color: orange;
transform: rotateX(60deg);
}
</style>
</head>
<body>
<div id = "demo1">첫 번째 div 영역입니다.
<div id = "demo2">두 번째 div 영역입니다.</div>
</div>
</body>
</html>코드 설명
1. 외부 컨테이너(#demo1)
주황색 테두리를 가진 부모 요소로, animation: myanim 3s infinite;를 통해 3초 동안 무한히 반복되는 애니메이션이 적용됩니다. 기본 perspective 값은 200px로 설정되어 있습니다.
2. @keyframes 규칙
myanim이라는 이름의 키프레임은 애니메이션의 중간 지점(50%)에서 perspective 값을 100px로 줄입니다. 이로 인해 원근 거리가 짧아지면서 내부 요소의 3D 왜곡 효과가 점진적으로 강해졌다가 다시 돌아오는 움직임이 만들어집니다.
3. 내부 요소(#demo2)
transform: rotateX(60deg);를 통해 X축 기준으로 60도 회전된 상태로 배치되어 있습니다. 부모 요소의 perspective 값이 변화함에 따라 이 회전된 요소의 원근감이 실시간으로 달라지는 것을 확인할 수 있습니다.
참고 사항
perspective 속성 대신 transform: perspective() 함수를 개별 요소에 직접 적용할 수도 있습니다. 다만 속성 방식은 부모 요소에 적용하여 여러 자식 요소가 하나의 소실점(vanishing point)을 공유하도록 할 때 유용합니다. 브라우저 호환성을 위해 필요한 경우 -webkit- 접두사를 함께 사용하는 것이 좋습니다.