CSS만 사용하여 클릭 시 이미지를 45도 회전하려면 어떻게 해야 합니까?

순수 CSS를 사용하여 클릭 시 CSS3 이미지 애니메이션

이 기사에서는 클릭 시 이미지를 45도 회전하는 방법을 살펴보겠습니다. JavaScript에 의존하지 않는 순수 CSS.

초기 코드

다음 CSS를 제공했습니다.

<code class="css">img {
    display: block;
    margin: 20px;
}

.crossRotate {
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
     transition-duration: 1s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
     transition-property: transform;
}

.crossRotate:hover {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
     transform: rotate(45deg);
}</code>

이 코드는 현재 회전에 애니메이션을 적용합니다. 마우스를 올려도 클릭에 응답하지 않습니다.

CSS 전용 솔루션

순수한 CSS를 사용하여 클릭 시 회전을 구현하려면 :active 선택기를 활용할 수 있습니다. . 수정된 CSS는 다음과 같습니다.

<code class="css">.crossRotate {
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
     transition-duration: 1s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
     transition-property: transform;
}

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

이제 이미지를 클릭하면 이미지가 45도 회전합니다. 그러나 클릭을 해제한 후에도 회전 상태는 유지됩니다. 클릭할 때마다 이미지를 원래 상태로 되돌리려면 JavaScript를 사용해야 합니다.

JavaScript 솔루션

JavaScript를 사용하면 클릭 시 회전은 다음과 같습니다.

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

이 코드는 이미지의 현재 변환을 확인합니다. "없음"이면 이미지가 회전되지 않았으므로 45도 회전한다는 의미입니다. "없음"이 아닌 경우 변환을 재설정하여 이미지를 원래 상태로 되돌립니다.

위 내용은 CSS만 사용하여 클릭 시 이미지를 45도 회전하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!