CSS rotate 속성

정의와 사용법

rotate 속성은 요소를 회전시키는 데 사용할 수 있습니다。

rotate 속성은 요소가 z축을 시계 방향으로 회전하는 정도를 나타냅니다. x축 또는 y축 또는 다른 방식으로 요소를 회전하려면, 해당 정의를 수행해야 합니다。

rotate 속성의 값은 각도, 축 이름 + 각도 또는 세 가지 값 + 각도일 수 있습니다。

다음을 통해 더 잘 이해할 수 있습니다 rotate 속성을 참조하세요演示。

주의：요소를 회전시키는 또 다른 기술은 회전 속성을 사용하는 것입니다. CSS 래핑() 함수 의 CSS transform 속성。

요소의 회전을 변경합니다：

div {
  rotate: 30deg;
}

when rotate 속성이 벡터와 각도로 설정되면, 요소는 이 벡터를 기준으로 회전합니다。

여기서 벡터는 두차원 평면의 [1 1 0]로, x와 y 좌표가 있으며, 그런 다음 60도로 회전합니다：

div {
  rotate: 1 1 0 60deg;
}

rotate: axis angle|initial|inherit;

값	설명
axis	선택 사항입니다. 설정되지 않으면 기본값은 z축입니다. 요소가 회전하는 축을 정의합니다. 가능한 값： x y z
angle	요소의 회전 정도를 정의합니다. 가능한 단위： deg（도） rad（라디안） 회전（회전 횟수）
vector angle	이 세 가지 숫자는 벡터를 정의하며, 요소는 이 벡터를 기준으로 회전합니다。 이 세 가지 숫자는 벡터의 x, y, z 좌표입니다。 마지막 값은 회전 각도입니다。 가능한 값： number number number angle
initial	이 속성을 기본값으로 설정합니다. 참조: initial。
inherit	부모 요소에서 이 속성을 상속합니다. 참조: inherit。

표中的数字表示首个完全支持该属性的浏览器版本。

크롬	에지	파이어폭스	사파리	오페라
104	104	72	14.1	90