이미지 회전 Onclick 자바스크립트

| | | | | | | | | | | | | | | | | |

CSS 회전() 함수는 요소를 특정 각도만큼 왜곡합니다. 양수 도를 사용하여 요소를 시계 방향으로 회전할 수 있습니다. 또는 음수를 사용하여 항목을 시계 반대 방향으로 회전할 수 있습니다.

오늘은 CSS를 사용하여 요소를 회전하는 방법을 알아보겠습니다. 요소를 회전하는 이유는 무엇입니까? 회전하는 요소는 웹 페이지를 보다 인터랙티브하게 만듭니다. 올바르게 사용하면 회전 요소가 사이트의 미학에 추가됩니다.

이 기사를 읽는 동안 컴패니언 리포지토리 를 사용하여 실제 개념을 볼 수 있습니다. 요소를 회전하는 방법을 아는 것은 CSS 도구 상자에 큰 도움이 될 것입니다.

CSS 회전()

CSS 회전() 기능을 사용하면 다음을 수행할 수 있습니다. 2D 축에서 요소를 회전합니다. 회전() 함수는 웹 요소를 회전하려는 각도라는 하나의 인수를 취합니다. 요소를 시계 방향 또는 시계 반대 방향으로 회전할 수 있습니다.

rotate() 함수의 구문을 살펴보겠습니다.

"각도" 값은 요소가 회전해야 하는 각도를 나타냅니다. 양수 도를 사용하여 시계 방향 회전을 지정할 수 있습니다(예: 45). 또는 음수 각도 값(예: -39)을 사용하여 반대 방향으로 회전할 수 있습니다.

회전() 기능은 모든 HTML 요소에 적용할 수 있습니다. 예를 들어 텍스트 단락을 회전할 수 있습니다. 또는 이미지를 회전할 수 있습니다.

페이지를 렌더링하는 즉시 HTML 회전이 나타나 회전이 보이지 않습니다. 작동 중인 회전을 보려면 CSS 전환 을 사용해야 합니다. 전환은 커서가 요소 위에 있을 때와 같이 작업이 수행될 때 요소의 상태를 변경합니다.

rotate () CSS 예제

회전 상자를 넣을 HTML 페이지를 만들어 보겠습니다. 상자를 div로 추가하고 여기에 클래스를 할당합니다("회전"이라고 함).

이제 스타일을 추가해 보겠습니다.

새로고침. 좋습니다. 색상 상자가 있습니다. 이 색상 상자에는 회전() 기능을 사용하는 데 필요한 모든 것이 있습니다.

스크린 샷 2020-08-12 at 8 09 12 PM

우리는 먼저 변형 속성을 먼저 논의해야합니다.

>이름에서 알 수 있듯이 은 요소를 변환합니다. 여기에 적용할 수 있는 기능 중 하나는 회전()입니다. transform 속성은 다른 많은 기능을 수행할 수 있으며 변환으로 할 수 있는 일이 많습니다. 회전은 그 중 하나일 뿐입니다.

회전 기능은 요소를 이동합니다. 우리는 하나의 인수가 필요합니다: 요소를 기울이고자 하는 각도입니다. 계속해서 양의 35도 회전을 적용해 보겠습니다.

상자를 회전했습니다! 등을 만지십시오.

회전은 정교한 사용자 인터페이스 아이디어 또는 회전하는 이미지를 허용합니다. 예를 들어 이미지를 180도 회전할 수 있습니다. 이 이미지를 다른 곳에서 회전해야 하는 경우 저장하고 적절하게 사용하십시오.

회전할 수 있는 또 다른 것은 텍스트입니다. 잡지를 모방한 레이아웃을 만든다고 가정해 보겠습니다. 실제로 텍스트를 회전하여 텍스트 요소를 강조할 수 있습니다.

그리고 회전()으로 할 수 있는 작업은 이것이 전부가 아닙니다. 회전 기능을 사용하면 정말 흥미로운 애니메이션 을 만들 수 있습니다!

거기에서 `전에 가서 div에서 CSS: hover 선택기 를 사용하여 멋진 회전 효과를 적용해 보겠습니다.

이것은 " N `는 것이 아니다 쿨

<도 클래스 = "WP 화상 블록"> GIF-20 -31-51

프레임 위로 마우스를 가져가면 프레임이 회전합니다. CSS background-color 속성을 사용하여 프레임 위로 마우스를 가져갈 때 프레임의 색상을 변경합니다.

결론

CSS 회전() 함수는 비대칭 웹 요소를 불러옵니다. 하나는 인수를 허용합니다: 요소의 회전 각도. 양수 또는 음수 값을 지정할 수 있습니다.

회전 요소를 사용하면 웹 페이지를 보다 아름답게 만들 수 있습니다. 예를 들어 사용자가 커서를 셀 위로 가져가면 셀에 회전을 적용할 수 있습니다. 또는 사용자가 마우스로 링크를 가리킬 때 링크를 회전하도록 결정할 수 있습니다. 이 기술을 어떻게 사용하느냐는 당신에게 달려 있습니다!

CSS에 대해 더 알고 싶으십니까? 최고의 학습 리소스에 대한 전문가의 조언과 팁을 보려면 전체 CSS 학습 가이드 를 확인하십시오.