Wie kann ich mit CSS ein Bild beim Schweben drehen lassen?

Transformieren eines Bildes beim Schweben: Drehen oder Drehen

Um den Effekt eines rotierenden Bildes beim Schweben mit CSS zu erzielen, müssen CSS3-Übergänge verwendet werden rotation()-Eigenschaft. Schauen wir uns die Lösung genauer an:

Die Übergangseigenschaft definiert, wie sich ein Element im Laufe der Zeit ändern soll. Hier gibt Transformation .7s Ease-In-Out an, dass die Transformation (Rotation) 0,7 Sekunden dauern und einer Beschleunigungskurve folgen sollte.

Die Transformationseigenschaft ist für die Änderung der Position, Größe oder Drehung des Elements verantwortlich. transform: rotate(360deg) weist den Browser an, das Bild um 360 Grad zu drehen, wenn der :hover-Status ausgelöst wird.

Hier ist der aktualisierte Code:

<code class="css">img {
  transition: transform .7s ease-in-out;
}

img:hover {
  transform: rotate(360deg);
}</code>

<code class="html"><img src="https://i.sstatic.net/BLkKe.jpg" width="100" height="100"/></code>

Dieser Code fügt hinzu Eine sanfte Animation des Bildes, die dazu führt, dass es sich einmal dreht, wenn der Cursor darüber schwebt. Sie können den Rotationswert anpassen, um den Drehwinkel zu steuern, oder die Übergangseinstellungen anpassen, um die Geschwindigkeit und Beschleunigung der Animation zu ändern.

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