CSS3의 3D 변환(3D Transforms)을 사용하면 웹 페이지의 요소를 단순한 평면이 아닌 입체적인 공간에서 자유롭게 조작할 수 있습니다. 요소를 X축, Y축, Z축 방향으로 이동하거나 회전시켜 더욱 역동적이고 몰입감 있는 사용자 인터페이스를 구현할 수 있습니다.
주요 3D 변환 함수
- rotateX() – X축을 기준으로 요소를 회전합니다.
- rotateY() – Y축을 기준으로 요소를 회전합니다.
- rotateZ() – Z축을 기준으로 요소를 회전합니다.
- translate3d(), translateZ() – 요소를 3차원 공간에서 이동합니다.
- scale3d(), scaleZ() – 요소를 3차원 공간에서 확대·축소합니다.
예제
다음 예제는 rotateX() 함수를 사용하여 X축을 중심으로 요소를 150도 회전시키는 방법을 보여줍니다. 구형 Safari 브라우저와의 호환성을 위해 -webkit- 접두사가 포함된 코드도 함께 작성되어 있습니다.
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv {
-webkit-transform: rotateX(150deg);
/* Safari */
transform: rotateX(150deg);
/* Standard syntax */
}
</style>
</head>
<body>
<div>
My website
</div>
<p>
Rotate X-axis
</p>
<div id = "myDiv">
My website
</div>
</body>
</html>
실행 결과
위 코드를 실행하면 첫 번째 박스는 원본 상태 그대로 표시되고, 두 번째 박스는 X축을 기준으로 150도 회전된 입체적인 모습으로 나타납니다.
참고: perspective 속성 활용하기
3D 변환 효과를 더욱 사실적으로 표현하고 싶다면 부모 요소에 perspective 속성을 지정하는 것이 좋습니다. 이 속성은 관찰자와 요소 사이의 거리를 설정하여 깊이감을 부여하며, 값이 작을수록 더 강한 원근 효과가 적용됩니다. 예를 들어 perspective: 500px;처럼 사용할 수 있습니다.