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="http://i.imgur.com/3DWAbmN.jpg" />
<img src="https://i.sstatic.net/BLkKe.jpg" width="100" height="100" /></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!