CSS3의 3D 변환 기능을 활용하면 요소를 X, Y, Z 세 축을 기준으로 회전시킬 수 있습니다. 그중 Z축 3D 변환은 화면에 수직인 축을 중심으로 요소를 회전시키는 방식으로, 시계 방향 또는 반시계 방향으로 요소를 돌릴 때 사용됩니다.
Z축 회전이란?
Z축은 사용자가 보는 화면에서 앞뒤로 뻗어 있는 가상의 축입니다. 이 축을 기준으로 요소를 회전시키면 마치 종이를 테이블 위에서 돌리듯이 평면상에서 회전하는 효과가 나타납니다. CSS3에서는 rotateZ() 함수를 사용하여 Z축 회전을 간단하게 구현할 수 있습니다.
- rotateZ(각도): 지정한 각도만큼 Z축을 중심으로 요소를 회전합니다.
- 양수 값은 시계 방향, 음수 값은 반시계 방향으로 회전합니다.
예제 코드
아래 코드는 rotateZ()를 사용해 div 요소를 90도 회전시키는 예제입니다. Safari 등 일부 브라우저와의 호환성을 위해 -webkit- 접두사도 함께 작성했습니다.
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#zDiv {
-webkit-transform: rotateZ(90deg);
/* Safari */
transform: rotateZ(90deg);
/* Standard syntax */
}
</style>
</head>
<body>
<p>Z축 회전 예제</p>
<div id = "zDiv">
tutorialspoint.com.
</div>
</body>
</html>코드 설명
기본 스타일 설정
모든 div 요소에는 너비 200px, 높이 100px가 지정되고, 분홍색 배경과 검은색 테두리가 적용되어 회전 효과를 눈으로 쉽게 확인할 수 있습니다.
rotateZ() 적용
#zDiv 선택자에는 transform: rotateZ(90deg)가 적용되어 해당 요소가 Z축을 중심으로 정확히 90도 회전합니다. 결과적으로 가로로 길었던 요소가 세로 방향으로 서게 됩니다.
실행 결과
위 코드를 실행하면 분홍색 배경의 div 요소가 90도 회전된 모습을 확인할 수 있습니다. 원래 가로 형태였던 요소가 세로로 세워지며, 내부 텍스트 역시 함께 회전합니다.
참고 사항
최신 브라우저에서는 표준 문법인 transform: rotateZ()만으로도 충분하지만, 구버전 Safari나 일부 모바일 브라우저를 지원해야 한다면 -webkit-transform 접두사를 함께 사용하는 것이 좋습니다. 또한 rotateX(), rotateY()와 조합하면 더욱 입체적인 3D 효과를 만들 수 있습니다.