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

순수한 CSS를 사용하여 클릭 시 CSS3 변환

순수한 CSS를 사용하여 클릭 시 이미지 회전을 달성하려면 마우스를 올리면 기존 코드가 회전하는 문제에 직면했습니다. 순수한 CSS 솔루션에 집중해 보겠습니다.

해결책:

CSS 전용:

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

이 솔루션은 :active 의사 클래스를 활용합니다. 이미지를 클릭하면 회전이 시작됩니다. 그러나 클릭 후에는 변환이 지속되지 않습니다.

지속적인 변환을 위해서는 JavaScript를 도입해야 합니다.

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

이 jQuery 코드는 현재 값을 기반으로 변환을 토글합니다. . 변환이 '없음'이면 45도 회전이 적용됩니다. 그렇지 않으면 변환이 제거됩니다.

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