rotateZ 함수

함수 rotateZ는 3D 공간에서 Z축을 기준으로 회전을 지정합니다. transform 속성과 함께 사용됩니다. 속성 값은 각도 단위로 된 각도입니다. 양수 값은 시계 방향으로, 음수 값은 반시계 방향으로 회전합니다. 회전은 transform-origin 속성으로 지정된 점을 중심으로 수행됩니다.

문법

css선택자 {
  transform: rotateZ(각도);
}

예제

이 예제에서 블록은 마우스를 올리면 Z축을 기준으로 180도 회전합니다. 회전을 부드럽게 하기 위해 transition 속성이 추가되었습니다:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 3px solid black;
  width: 100px;
  height: 50px;
  transition: transform 3s linear;
}
#elem:hover {
  transform: rotateZ(180deg);
}

Результат:

예제

transform-origin 속성을 사용하여 회전 축을 변경합니다:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 3px solid black;
  width: 100px;
  height: 50px;
  transition: transform 3s linear;
  transform-origin: center bottom;
}
#elem:hover {
  transform: rotateZ(180deg);
}

Результат:

참고 항목