CSS3의 2D·3D 변환(Transform) 기능 중 rotateZ(angle) 메서드를 사용하면 요소를 Z축을 기준으로 회전시킬 수 있습니다. Z축은 화면을 마주 보는 사용자의 시선 방향과 평행한 축으로, rotateZ()를 적용하면 요소가 화면 평면 위에서 시계 방향 또는 반시계 방향으로 회전하는 효과를 얻을 수 있습니다.
rotateZ() 함수는 꺾쇠 괄호 안에 각도 값을 받으며, 단위는 deg(도)를 사용합니다. 양수 값은 시계 방향, 음수 값은 반시계 방향으로 회전합니다.
예제 코드
아래 예제에서는 div 요소에 rotateZ(90deg)를 적용하여 해당 요소를 Z축 기준으로 90도 회전시킵니다.
<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>rotate Z axis</p>
<div id = "zDiv">
tutorials point.com.
</div>
</body>
</html>코드 설명
- 기본 div 스타일에는 너비 200px, 높이 100px와 함께 분홍색 배경과 검은색 테두리를 지정했습니다.
#zDiv선택자에는transform: rotateZ(90deg)를 적용하여 요소를 Z축 기준으로 90도 회전시켰습니다.-webkit-transform속성은 구버전 Safari 등 웹킷 기반 브라우저를 위한 접두사(prefix) 문법입니다.
실행 결과
위 코드를 실행하면 분홍색 배경의 div 요소가 화면 평면상에서 시계 방향으로 90도 회전되어 나타납니다.
참고 사항
rotateZ()는 사실상 2D 변환의 rotate() 함수와 동일한 시각적 결과를 만듭니다. 다만 3D 변환 맥락에서 축을 명확히 구분하고 싶을 때 rotateX(), rotateY()와 함께 사용하면 코드의 의미가 더 분명해집니다. 또한 최신 브라우저에서는 벤더 접두사 없이 표준 문법인 transform만으로도 정상적으로 동작하므로, 호환성이 필요한 경우에만 접두사를 추가하는 것이 좋습니다.