Hier sind zwei mögliche Titel, die sich auf den von Ihnen gewünschten „reinen CSS'-Aspekt konzentrieren: 1. Kann ich ein Bild per Klick mit reinem CSS um 45 Grad drehen? (Betont die Frage und das „reine C

CSS-Transformation beim Klicken mit reinem CSS

In diesem Artikel erfahren Sie, wie Sie beim Klicken eine Rotationsanimation für ein Bild erzielen nur CSS. Beginnen wir mit der ursprünglichen Frage.

Frage:

Ein Benutzer wollte ein Bild mithilfe von CSS um 45 Grad drehen, um ein Kreuzsymbol zu erstellen. Allerdings funktionierte ihr Code, der auf Hover basierte, nicht für Onclick-Ereignisse. Sie suchten nach einer einfachen Lösung mit reinem CSS.

Antwort:

Um die On-Click-Rotation zu erreichen, können wir stattdessen die Pseudoklasse „:active“ verwenden ':schweben'. Hier ist der überarbeitete Code:

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

Dieser Fix behebt jedoch nicht die Persistenz der Transformation, sobald die Klickaktivität endet. Um dieses Problem zu lösen, könnten wir JavaScript integrieren, aber für eine reine CSS-Lösung ist Persistenz nicht machbar.

Das obige ist der detaillierte Inhalt vonHier sind zwei mögliche Titel, die sich auf den von Ihnen gewünschten „reinen CSS'-Aspekt konzentrieren: 1. Kann ich ein Bild per Klick mit reinem CSS um 45 Grad drehen? (Betont die Frage und das „reine C. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!