rotate3d 함수

rotate3d 함수는 요소를 3차원 공간에서 지정된 축에 대해 지정된 각도로 회전시킵니다. transform 속성과 함께 사용됩니다. 속성 값은 각도 단위로 지정된 각도입니다.

이 함수는 쉼표로 구분된 4 개의 매개변수를 값으로 받습니다. 처음 세 매개변수는 회전이 수행될 3차원 공간의 축 벡터를 정의합니다. 네 번째 매개변수는 회전 각도를 지정합니다.

구문

css선택자 {
  transform: rotate3d(X, Y, Z, angle);
}

예제

이 예제에서 축 벡터는 화면의 오른쪽 상단 모서리를 향합니다:

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

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

Результат:

함께 보기