So stellen Sie das Bild so ein, dass es in CSS gedreht wird

So stellen Sie das Bild so ein, dass es sich in CSS kontinuierlich dreht: Sie können es mithilfe des Animationsattributs und des Transformationsattributs festlegen, z. B. [-webkit-transform: rotation(360deg);].

Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3-Version. Diese Methode ist für alle Computermarken geeignet.

(Lernvideo-Sharing: CSS-Video-Tutorial)

So stellen Sie das Bild so ein, dass es sich kontinuierlich in CSS dreht:

Verwandte Attribute:

Animationsanimationsattribut

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

Attributwert:

• Animation -name Geben Sie den Namen des Keyframes an, der an den Selektor gebunden werden soll.

• animation-duration Geben Sie an, wie viele Sekunden oder Millisekunden die Animation benötigt, um abgeschlossen zu werden.

• animation-timing-function Legen Sie fest, wie die Animation einen Zyklus abschließt

• animation-delay Legt das Verzögerungsintervall fest, bevor die Animation startet.

• animation-iteration-count Definiert, wie oft die Animation abgespielt wird.

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

• animation-fill-mode gibt den Stil an, der auf das Element angewendet werden soll, wenn die Animation nicht abgespielt wird (wenn die Animation abgeschlossen ist oder wenn es eine Verzögerung gibt, bevor die Animation abgespielt wird).

• animation-play-state Gibt an, ob die Animation ausgeführt oder angehalten wird.​

• initial Setzt die Eigenschaft auf ihren Standardwert.

• inherit Attribute vom übergeordneten Element erben. Die Eigenschaft

Transform wendet eine 2D- oder 3D-Transformation auf ein Element an. Mit dieser Eigenschaft können Sie das Element drehen, skalieren, verschieben, neigen usw.

transform: none|transform-functions;

Attributwert:

• none Die Definition führt keine Konvertierung durch.

• matrix(n,n,n,n,n,n) definiert eine 2D-Transformation unter Verwendung einer Matrix aus sechs Werten.

• matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) Definiert eine 3D-Transformation unter Verwendung einer 4x4-Matrix mit 16 Werten.

• translate(x,y) definiert die 2D-Transformation.

• translate3d(x,y,z) definiert die 3D-Transformation.

Code-Implementierung:

HTML-Code:

<div class="demo">
    <img  class="an img" src="/test/img/2.png"    style="max-width:90%"  style="max-width:90%"/ alt="So stellen Sie das Bild so ein, dass es in CSS gedreht wird" >
</div>

Rotationscode:

.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;}

Implementierungseffekt:

Verwandte Empfehlungen: CSS-Tutorial

Das obige ist der detaillierte Inhalt vonSo stellen Sie das Bild so ein, dass es in CSS gedreht wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!