Wie erstelle ich mit CSS einen durch Schweben aktivierten Bilddreh?

Hover-aktivierte Bilddrehung

Die Integration dynamischen Verhaltens in Ihre Webseiten, wie z. B. Bildrotationen beim Hover, kann die Benutzerinteraktion verbessern. Um diesen Effekt mit CSS auf einem Bild mit kreisförmigem Rand zu erzielen, befolgen Sie diese Schritte:

1. CSS3-Übergänge mit rotieren()

Verwenden Sie CSS3-Übergänge, um das Bild beim Schweben sanft zu drehen. Die Eigenschaft „Übergang“ definiert die Dauer und Beschleunigungsfunktion für die Animation. In diesem Fall legen wir die Übergangsdauer auf 0,7 Sekunden fest und geben eine Ease-in-out-Easing-Funktion an.

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

2. Hover-Transformation

Um das Bild beim Hover zu drehen, verwenden wir die Eigenschaft „transform“ mit der Funktion „rotate()“, um den gewünschten Drehwinkel festzulegen. In diesem Beispiel drehen wir das Bild um 360 Grad.

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

3. HTML-Implementierung

Platzieren Sie in Ihrem HTML-Code ein Bildelement mit der entsprechenden Quelle und Größe.

<code class="html"><img src="path/to/image.jpg" width="100" height="100"></code>

Beispielcode

Hier ist ein vollständiges Codebeispiel, das den Effekt des sich drehenden Bildes demonstriert:

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

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

<code class="html"><img src="path/to/image.jpg" width="100" height="100"></code>

Mit diesem Code dreht sich das Bild sanft um 360 Grad, wenn der Benutzer mit der Maus darüber fährt.

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit CSS einen durch Schweben aktivierten Bilddreh?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!