Pure CSS를 사용하여 클릭 시 이미지를 45도 회전하는 방법은 무엇입니까?

클릭 시 CSS3 변환: 순수한 CSS 접근 방식

웹 개발에서 요소 변환은 매력적이고 기능적인 인터페이스를 만드는 데 중요한 측면인 경우가 많습니다. . CSS3를 사용하여 달성할 수 있는 변환 중 하나는 회전입니다. 이 기사에서는 순수 CSS를 활용하여 클릭 시 이미지(특히 더하기 기호)에 45도 회전을 적용하는 방법을 살펴봅니다.

제공된 코드는 마우스를 올리면 이미지를 성공적으로 회전합니다. 그러나 클릭 시 회전하는 원하는 동작을 달성하려면 약간의 수정이 필요합니다.

CSS에서 ':active' 의사 클래스는 요소나 그 하위 요소가 클릭되거나 활성화되는 상태를 나타냅니다. 이 의사 클래스를 활용하면 이미지를 클릭할 때 회전 변환을 적용하는 CSS 규칙을 추가할 수 있습니다.

<code class="css">.crossRotate:active {
   transform: rotate(45deg);
}</code>

이 규칙을 구현하면 이미지를 클릭하면 이미지가 45도 회전합니다. 이 변환은 일시적이며 클릭을 놓으면 원래 상태로 되돌아간다는 점에 유의하는 것이 중요합니다.

클릭 이벤트 이후에도 변환이 지속되는 보다 영구적인 솔루션을 위해 JavaScript를 통합할 수 있습니다. jQuery를 사용하면 클릭 이벤트를 캡처하고 그에 따라 회전 변환을 토글하여 이를 달성할 수 있습니다.

<code class="javascript">$( ".crossRotate" ).click(function() {
    if (  $( this ).css( "transform" ) == 'none' ){
        $(this).css("transform","rotate(45deg)");
    } else {
        $(this).css("transform","" );
    }
});</code>

이 스니펫은 이미지를 클릭할 때 회전 변환을 토글합니다. 이미지가 기본 상태일 때 클릭하면 45도 회전됩니다. 다시 클릭하면 원래 위치로 돌아갑니다.

위 내용은 Pure CSS를 사용하여 클릭 시 이미지를 45도 회전하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!