suchen

Heim  >  Artikel  >  Web-Frontend  >  Beispielcode für die Implementierung des Avatar-Rotationseffekts mit CSS3

Beispielcode für die Implementierung des Avatar-Rotationseffekts mit CSS3

高洛峰
高洛峰Original
2017-03-15 09:07:011576Durchsuche

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 Editor, um einen Blick darauf zu werfen

Der Effekt der Maus ist nicht platziert:

Beispielcode für die Implementierung des Avatar-Rotationseffekts mit CSS3

Rotationseffekt nach dem Platzieren der Maus:

Beispielcode für die Implementierung des Avatar-Rotationseffekts mit CSS3

Übergang: alle 2,0s bedeutet alle Attribute Die Transformation ist innerhalb von 2 Sekunden abgeschlossen;

trans

fürm: rotieren(360deg); bedeutet, dass das Bild um 360 Grad gedreht wird. 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <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>
    </head>
    <body>
        <img  src="img/03.jpg" / alt="Beispielcode für die Implementierung des Avatar-Rotationseffekts mit CSS3" >
    </body>
</html>


Das obige ist der detaillierte Inhalt vonBeispielcode für die Implementierung des Avatar-Rotationseffekts mit CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Ausführliche Erläuterung der Verwendung von CSS-Hintergrundbildkoordinatenpositionierung und Techniken mit negativen ZahlenNächster Artikel：Ausführliche Erläuterung der Verwendung von CSS-Hintergrundbildkoordinatenpositionierung und Techniken mit negativen Zahlen

In Verbindung stehende Artikel

Mehr sehen