Heim  >  Artikel  >  Web-Frontend  >  Wie erstelle ich mit CSS einen durch Schweben aktivierten Bilddreh?

Wie erstelle ich mit CSS einen durch Schweben aktivierten Bilddreh?

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-11-03 13:29:02786Durchsuche

How to Create a Hover-Activated Image Spin with CSS?

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!

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