CSS3-Implementierung der Beispielfreigabe für den Avatar-Rotationseffekt

In diesem Artikel wird hauptsächlich der Effekt der Avatar-Rotation mit CSS3 vorgestellt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Der Effekt, wenn die Maus nicht platziert ist:

Der Rotationseffekt, wenn die Maus platziert ist:

Übergang: alle 2,0 Sekunden; bedeutet, dass alle Attributtransformationen innerhalb von 2 Sekunden abgeschlossen sind;

transformation: rotieren (360 Grad); bedeutet, dass das Bild um 360 Grad gedreht wird.

nbsp;html>

    
        <meta>
        <title></title>
        <style>
            img{
                border: #000 solid 2px;
                display: block;
                margin: 50px auto;
                border-radius: 50%;
                transition: all 2.0s;
            }
            img:hover{
                transform: rotate(360deg);
            }
        </style>
    
    
        <img  alt="CSS3-Implementierung der Beispielfreigabe für den Avatar-Rotationseffekt" >
    

Verwandte Empfehlungen;

Detaillierte Beispiele für HTML5 und CSS3 zur Erzielung von 3D-Konvertierungseffekten

Detaillierte Erläuterung von CSS- und HTML-Anpassung Definieren Sie den Kontrollkästcheneffekt

Über die Implementierungsmethode von CSS3, bei der mehrere Elemente den Effekt nacheinander anzeigen

Das obige ist der detaillierte Inhalt vonCSS3-Implementierung der Beispielfreigabe für den Avatar-Rotationseffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!