Wie kann ich ein Bild beim Klicken nur mit CSS um 45 Grad drehen?

CSS3 Bild beim Klicken mit reinem CSS animieren

In diesem Artikel erfahren Sie, wie Sie ein Bild beim Klicken mit um 45 Grad drehen reines CSS, ohne auf JavaScript angewiesen zu sein.

Anfänglicher Code

Sie haben das folgende CSS bereitgestellt:

<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>

Dieser Code animiert derzeit die Rotation beim Schweben, aber es reagiert nicht auf Klicks.

Nur ​​CSS-Lösung

Um die Rotation beim Klicken mit reinem CSS zu erreichen, können Sie den :active-Selektor verwenden . So sollte Ihr korrigiertes CSS aussehen:

<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>

Wenn Sie nun auf das Bild klicken, wird es um 45 Grad gedreht. Es bleibt jedoch nach dem Loslassen des Klicks gedreht. Wenn Sie möchten, dass das Bild nach jedem Klick in seinen ursprünglichen Zustand zurückkehrt, müssen Sie JavaScript verwenden.

JavaScript-Lösung

Mit JavaScript können Sie das umschalten Drehung beim Klicken wie folgt:

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

Dieser Code überprüft die aktuelle Transformation des Bildes. Wenn es „none“ ist, bedeutet dies, dass das Bild nicht gedreht ist, also um 45 Grad gedreht wird. Wenn es nicht „none“ ist, wird die Transformation zurückgesetzt und das Bild in seinen ursprünglichen Zustand zurückversetzt.

Das obige ist der detaillierte Inhalt vonWie kann ich ein Bild beim Klicken nur mit CSS um 45 Grad drehen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!