rotateZ 함수
함수 rotateZ는 3D 공간에서 Z축을 기준으로 회전을 지정합니다.
transform 속성과 함께 사용됩니다.
속성 값은 각도 단위로 된 각도입니다.
양수 값은 시계 방향으로, 음수 값은 반시계 방향으로 회전합니다.
회전은 transform-origin 속성으로 지정된 점을 중심으로 수행됩니다.
문법
선택자 {
transform: rotateZ(각도);
}
예제
이 예제에서 블록은 마우스를 올리면 Z축을 기준으로 180도 회전합니다.
회전을 부드럽게 하기 위해 transition 속성이 추가되었습니다:
<div id="elem">lorem ipsum</div>
#elem {
border: 3px solid black;
width: 100px;
height: 50px;
transition: transform 3s linear;
}
#elem:hover {
transform: rotateZ(180deg);
}
:
예제
transform-origin 속성을 사용하여 회전 축을 변경합니다:
<div id="elem">lorem ipsum</div>
#elem {
border: 3px solid black;
width: 100px;
height: 50px;
transition: transform 3s linear;
transform-origin: center bottom;
}
#elem:hover {
transform: rotateZ(180deg);
}
:
