So drehen Sie Bilder mit CSS

So drehen Sie Bilder mit CSS: Erstellen Sie zunächst eine HTML-Beispieldatei. Fügen Sie dann das Bild über das IMG-Tag hinzu. Fügen Sie schließlich die Transformations- und Animationsstilattribute zum IMG-Bild hinzu, um den Bildrotationseffekt zu erzielen.

Die Betriebsumgebung dieses Artikels: Windows7-System, HTML5- und CSS3-Version, Dell G3-Computer.

Wir können dem IMG-Bild Transformations- und Animationsstilattribute hinzufügen, um den Bildrotationseffekt zu erzielen.

Beispiel:

HTML-Code:

<div class="demo">
    <img class="an img" src="/test/img/2.png" width="500" height="500"/>
</div>

css-Code:

.demo{text-align: center;
    margin-top: 100px;}
@-webkit-keyframes rotation{
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}
.an{
    -webkit-transform: rotate(360deg);
    animation: rotation 3s linear infinite;
    -moz-animation: rotation 3s linear infinite;
    -webkit-animation: rotation 3s linear infinite;
    -o-animation: rotation 3s linear infinite;
}
.img{border-radius: 250px;}

Wir haben dem IMG-Bild Transformations- und Animationsstilattribute hinzugefügt, um einen 360-Grad-Rotationsanimationseffekt zu erzielen.

Die Methode zum Erzielen des Effekts der automatischen Drehung von CSS-animierten Bildern ist wie oben beschrieben. Solange Sie die Transformations- und Animationseigenschaften in CSS beherrschen, können Sie die meisten Animationseffekte erzielen. Ihre Prinzipien sind grundsätzlich dieselben. Das Attribut

transform wendet eine 2D- oder 3D-Transformation auf ein Element an. Mit dieser Eigenschaft können wir das Element drehen, skalieren, verschieben oder neigen. Mit der Methode „rotate()“ wird das Element um einen vorgegebenen Winkel im Uhrzeigersinn gedreht. Negative Werte sind zulässig und das Element wird gegen den Uhrzeigersinn gedreht. Die

animation-Eigenschaft ist eine Abkürzungseigenschaft zum Festlegen von sechs Animationseigenschaften:

animation-name gibt den Keyframe-Namen an, der an den Selektor gebunden werden muss.

animation-duration gibt die Zeit an, die zum Abschließen der Animation benötigt wird, in Sekunden oder Millisekunden.

animation-timing-function gibt die Geschwindigkeitskurve der Animation an.

animation-delay gibt die Verzögerung vor dem Start der Animation an.

animation-iteration-count gibt an, wie oft die Animation abgespielt werden soll.

animation-direction gibt an, ob die Animation der Reihe nach rückwärts abgespielt werden soll.

【Empfohlenes Lernen: CSS-Video-Tutorial】

Das obige ist der detaillierte Inhalt vonSo drehen Sie Bilder mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!