Heim > Web-Frontend > CSS-Tutorial > Wie erstelle ich mit CSS einen Bilddrehungs- oder Rotationseffekt beim Schweben?

Wie erstelle ich mit CSS einen Bilddrehungs- oder Rotationseffekt beim Schweben?

Mary-Kate Olsen
Freigeben: 2024-11-04 22:26:02
Original
323 Leute haben es durchsucht

How to Create an Image Spin or Rotation Effect on Hover Using CSS?

Bilddrehung oder Drehung beim Schweben mit CSS emulieren

Um den gewünschten Dreh- oder Rotationseffekt auf einem Bild beim Schweben zu erzielen, kann CSS mit bestimmten Eigenschaften und Übergängen verwendet werden . So könnte es implementiert werden:

Code-Implementierung

<code class="css">img {
  border-radius: 50%;
  transition: transform .7s ease-in-out;
}
img:hover {
  transform: rotate(360deg);
}</code>
Nach dem Login kopieren

Im bereitgestellten HTML-Code wird jedes Bildelement mithilfe der oben genannten CSS-Stile geändert:

<code class="html"><img src="http://i.imgur.com/3DWAbmN.jpg" />
<img src="https://i.sstatic.net/BLkKe.jpg" width="100" height="100" /></code>
Nach dem Login kopieren

Erläuterung

  • Randradius: Setzt das Bild auf eine Kreisform (50 % Randradius).
  • Übergang: Definiert der sanfte Übergang der Bildtransformation beim Schweben (Dauer- und Beschleunigungsfunktion).
  • Transformieren: Drehen: Beim Schweben ist die Transformationseigenschaft des Bildes so eingestellt, dass es sich um 360 Grad dreht, wodurch es sich dreht .

Diese CSS-Implementierung ermöglicht es dem Bild, sich sanft um seine Mitte zu drehen, wenn die Maus darüber schwebt.

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit CSS einen Bilddrehungs- oder Rotationseffekt beim Schweben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage