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

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>

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

<code class="html"><img  src="/static/imghwm/default1.png" data-src="http://i.imgur.com/3DWAbmN.jpg" class="lazy" alt="Wie erstelle ich mit CSS einen Bilddrehungs- oder Rotationseffekt beim Schweben?" >
<img  src="/static/imghwm/default1.png" data-src="https://i.sstatic.net/BLkKe.jpg" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="Wie erstelle ich mit CSS einen Bilddrehungs- oder Rotationseffekt beim Schweben?" ></code>

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!