CSS 회전() 함수는 요소를 특정 각도만큼 기울입니다. 양수 도를 사용하여 요소를 시계 방향으로 회전할 수 있습니다. 또는 음수를 사용하여 요소를 시계 반대 방향으로 회전할 수 있습니다.
오늘은 CSS로 요소를 회전하는 방법을 배웁니다. 요소를 회전해야 하는 이유는 무엇입니까? 회전하는 요소는 웹 페이지를 보다 인터랙티브하게 만듭니다. 올바르게 사용하면 회전 요소가 사이트의 미학에 추가됩니다.
이 기사를 읽는 동안 함께 제공되는 리포지토리를 참조하여 실제 개념을 확인할 수 있습니다. 요소를 회전하는 방법을 아는 것은 CSS 도구 상자에 유용한 추가 정보가 될 것입니다.
CSS 회전()
CSS 회전() 함수를 사용하면 2D 축에서 요소를 회전할 수 있습니다. 회전() 함수는 웹 요소를 회전하려는 각도라는 하나의 인수를 허용합니다. 요소를 시계 방향 또는 시계 반대 방향으로 회전할 수 있습니다.
회전() 함수의 구문을 살펴보겠습니다.
transform: rotate(angle);
"angle" 값은 요소가 회전해야 하는 각도를 나타냅니다. 양수(예:45)를 사용하여 시계 방향 회전을 지정할 수 있습니다. 또는 음의 각도 값(예:-39)을 사용하여 반대 방향으로 회전할 수 있습니다.
회전() 함수는 모든 HTML 요소에 적용할 수 있습니다. 예를 들어 텍스트 단락을 회전할 수 있습니다. 또는 이미지를 회전할 수 있습니다.
HTML 회전은 페이지를 렌더링하는 즉시 나타나므로 회전이 보이지 않습니다. 회전 동작을 보려면 CSS 전환을 사용해야 합니다. 전환은 커서가 요소 위에 있을 때와 같이 작업이 수행될 때 요소의 상태를 변경합니다.
참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.
부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.
rotate() CSS 예제
회전 상자를 배치할 HTML 페이지를 만들어 보겠습니다. 상자를 div로 추가하고 클래스를 지정해 보겠습니다(이름을 "회전"으로 지정).
<div class="rotate"></div>
이제 여기에 스타일을 추가해 보겠습니다.
div.rotate {
width: 50px;
height: 50px;
background-color: chocolate;
} 새로 고치다. 좋습니다. 색상 상자가 있습니다. 이 색상 상자에는 회전() 함수를 사용하는 데 필요한 모든 것이 있습니다.
상자를 회전하려면 먼저 transform 속성을 논의해야 합니다.
CSS 변환 기능은 이름에서 알 수 있듯이 요소를 변환합니다. 적용할 수 있는 기능 중 하나는 rotate()입니다. . 변형 속성은 다른 많은 기능을 취할 수 있으며 변형으로 할 수 있는 일이 많습니다. 회전은 그 중 하나일 뿐입니다.
회전 기능은 요소를 이동합니다. 하나의 인수가 필요합니다. 요소를 기울이려는 각도입니다. 35도 양의 회전을 적용해 보겠습니다.
div.rotate {
width: 50px;
height: 50px;
background-color: chocolate;
transform: rotate(35deg);
} 우리는 상자를 회전했습니다! 등을 두드리세요.
CSS 변환 회전() 함수를 사용하는 경우
회전은 멋진 UI 아이디어나 이미지 회전을 허용합니다. 예를 들어 이미지를 180도 회전할 수 있습니다. 회전된 이미지가 다른 곳에서 필요하다면 저장하고 적절하게 사용하십시오.
회전할 수 있는 또 다른 것은 텍스트입니다. 잡지를 모방한 레이아웃을 만들고 있다고 가정해 보겠습니다. 실제로 텍스트를 회전하여 텍스트 요소를 강조할 수 있습니다.
rotate()로 할 수 있는 일은 이것이 전부가 아닙니다. . 회전 기능을 사용하면 정말 멋진 애니메이션을 만들 수 있습니다. !
div에서 CSS :hover 선택기를 사용하여 실제로 멋진 회전 효과를 적용해 보겠습니다.
.rotate:hover {
transform: rotate(35deg);
background-color: deeppink;
} 멋지지 않아? 😎
마우스를 상자 위로 가져가면 상자가 회전합니다. background-color CSS 속성을 사용하여 상자 위로 마우스를 가져갈 때 상자의 색상을 변경합니다.
결론
CSS 회전() 함수는 웹 요소가 비스듬히 나타나도록 합니다. 이 함수는 요소를 회전해야 하는 각도라는 하나의 인수를 허용합니다. 양수 또는 음수 정도 값을 지정할 수 있습니다.
요소를 회전하면 웹 페이지를 미학적으로 더 즐겁게 만들 수 있습니다. 예를 들어 사용자가 커서를 상자 위로 가져가면 상자에 회전을 적용할 수 있습니다. 또는 사용자가 마우스로 링크를 가리킬 때 링크를 회전하도록 결정할 수 있습니다. 이 기술을 어떻게 사용하느냐는 당신에게 달려 있습니다!
CSS에 대해 더 알고 싶으십니까? 최고의 학습 리소스에 대한 전문가의 조언과 지침을 보려면 전체 CSS 학습 방법 가이드를 확인하세요.