CSS 회전() 함수는 요소를 특정 각도만큼 왜곡합니다. 양수 도를 사용하여 요소를 시계 방향으로 회전할 수 있습니다. 또는 음수를 사용하여 항목을 시계 반대 방향으로 회전할 수 있습니다.
오늘은 CSS를 사용하여 요소를 회전하는 방법을 알아보겠습니다. 요소를 회전하는 이유는 무엇입니까? 회전하는 요소는 웹 페이지를 보다 인터랙티브하게 만듭니다. 올바르게 사용하면 회전 요소가 사이트의 미학에 추가됩니다.
이 기사를 읽는 동안 컴패니언 리포지토리 를 사용하여 실제 개념을 볼 수 있습니다. 요소를 회전하는 방법을 아는 것은 CSS 도구 상자에 큰 도움이 될 것입니다.
CSS 회전()
CSS 회전() 기능을 사용하면 다음을 수행할 수 있습니다. 2D 축에서 요소를 회전합니다. 회전() 함수는 웹 요소를 회전하려는 각도라는 하나의 인수를 취합니다. 요소를 시계 방향 또는 시계 반대 방향으로 회전할 수 있습니다.
rotate() 함수의 구문을 살펴보겠습니다.
"각도" 값은 요소가 회전해야 하는 각도를 나타냅니다. 양수 도를 사용하여 시계 방향 회전을 지정할 수 있습니다(예: 45). 또는 음수 각도 값(예: -39)을 사용하여 반대 방향으로 회전할 수 있습니다.
회전() 기능은 모든 HTML 요소에 적용할 수 있습니다. 예를 들어 텍스트 단락을 회전할 수 있습니다. 또는 이미지를 회전할 수 있습니다.
페이지를 렌더링하는 즉시 HTML 회전이 나타나 회전이 보이지 않습니다. 작동 중인 회전을 보려면 CSS 전환 을 사용해야 합니다. 전환은 커서가 요소 위에 있을 때와 같이 작업이 수행될 때 요소의 상태를 변경합니다.