HTML, CSS - rotate

 

HTML/CSS에서 rotate() 함수는 2D 평면에서 고정된 지점을 중심으로 요소를 회전하는 변환을 정의합니다. 변환의 결과는 <transform-function> 데이터 유형입니다.

rotate() 함수의 구문은 다음과 같습니다.

 

rotate(angle)

 

여기서 angle은 요소를 회전할 각도입니다. 각도는 degrees 단위로 지정됩니다. 음수 각도는 반시계 방향으로 회전하는 것을 의미합니다.

예를 들어, 다음 CSS는 요소를 90도 시계 방향으로 회전합니다.

 

div {
  transform: rotate(90deg);
}

 

rotate() 함수는 다음과 같은 3개의 축을 중심으로 요소를 회전할 수 있습니다.

• X 축: 요소의 왼쪽에서 오른쪽으로.
• Y 축: 요소의 위에서 아래로.
• Z 축: 요소의 앞에서 뒤로.

축을 지정하려면 rotate() 함수에 축 이름을 angle 뒤에 슬래시('/')로 구분하여 지정합니다. 예를 들어, 다음 CSS는 요소를 Y 축을 중심으로 90도 시계 방향으로 회전합니다.

 

div {
  transform: rotate(90deg/Y);
}

 

rotate() 함수는 다음과 같은 2개의 옵션을 사용할 수 있습니다.

• origin: 요소의 회전 중심을 지정합니다.
• deg: 각도를 degrees 단위로 지정합니다. (기본값)
• rad: 각도를 radians 단위로 지정합니다.

예를 들어, 다음 CSS는 요소의 회전 중심을 요소의 왼쪽 상단 모서리로 설정하고, 각도를 radians 단위로 지정합니다.

 

div {
  transform: rotate(1.57, 0, 0);
}

 

rotate() 함수는 CSS transform 속성에 사용됩니다.

 

div {
  transform: rotate(90deg);
}

 

이 CSS는 요소를 90도 시계 방향으로 회전합니다.

rotate() 함수는 HTML/CSS에서 요소를 회전하는 데 사용할 수 있는 유용한 함수입니다. 이 함수를 사용하여 요소를 다양한 각도로 회전할 수 있습니다.