Heim  >  Artikel  >  Web-Frontend  >  Wie drehe ich ein Bild beim Klicken mit CSS und JavaScript?

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

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-11-01 01:50:28226Durchsuche

How to Rotate an Image on Click Using CSS and 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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn