Wie drehe ich ein Bild beim Klicken mit CSS und JavaScript?

CSS3-Transformation beim Klicken mit reinem CSS

Um eine Bilddrehung beim Klicken mit reinem CSS zu erreichen, sind wir auf eine Herausforderung gestoßen, bei der sich unser vorhandener Code beim Schweben dreht. Konzentrieren wir uns auf eine reine CSS-Lösung.

Lösung:

Nur ​​CSS:

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

Diese Lösung nutzt die Pseudoklasse :active, Dadurch wird die Drehung beim Klicken auf das Bild ausgelöst. Allerdings bleibt die Transformation nach dem Klick nicht bestehen.

Für eine dauerhafte Transformation müssen wir JavaScript einführen:

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

Dieser jQuery-Code schaltet die Transformation basierend auf dem aktuellen Wert um . Wenn die Transformation „none“ ist, wird die 45-Grad-Drehung angewendet; Andernfalls wird die Transformation entfernt.

Das obige ist der detaillierte Inhalt vonWie drehe ich ein Bild beim Klicken mit CSS und JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!