Um eine Rotationsanimation in CSS zu erreichen, müssen Sie „rotate()“ im Transformationsattribut verwenden, um sie in X-Achsen-Richtung, Y-Achsen-Richtung und Z-Achsen-Richtung festzulegen.
Entlang der X-Achsenrichtung drehen
Geben Sie die Drehrichtung im Code an. Diesmal beträgt der Startpunkt 0 Grad, der Endpunkt 360 Grad (eine Drehung) und die Drehung wird in Richtung der X-Achse angegeben. Bewegen Sie dann den Mauszeiger, um das Bild zu drehen.
Animationsdauer ist die Verarbeitungszeit der Animation, Animationiterationsanzahl ist die Anzahl der Animationsverarbeitungen.
@keyframes turnX{
0%{transform:rotateX(0deg);}
100%{transform:rotateX(360deg);}
}
#rX:hover{
animation-name:turnX;
animation-duration:3s;
animation-iteration-count:1;
}Wenn Sie die Maus auf dem Bild platzieren und entlang der X-Achsenrichtung drehen, ist der Effekt wie folgt:
Entlang drehen die Richtung der Y-Achse
Im Grunde fast das Gleiche wie die Drehung der X-Achse. Lediglich die Drehung wird in eine Drehung in Richtung der Y-Achse geändert.
@keyframes turnY{
0%{transform:rotateY(0deg);}
100%{transform:rotateY(360deg);}
}
#rY:hover{
animation-name:turnY;
animation-duration:3s;
animation-iteration-count:1;
}Wenn Sie mit der Maus über das Bild fahren, dreht es sich entlang der Y-Achsenrichtung mit folgendem Effekt:
Drehen entlang der Z-Achsenrichtung
ist im Grunde auch dasselbe wie die Drehung der X-Achse. Ändert nur die Drehung in Richtung der Z-Achse.
@keyframes turnZ{
0%{transform:rotateZ(0deg);}
100%{transform:rotateZ(360deg);}
}
#rZ:hover{
animation-name:turnZ;
animation-duration:3s;
animation-iteration-count:1;
}Wenn Sie die Maus auf dem Bild platzieren, ist der Rotationseffekt entlang der Z-Achsenrichtung wie folgt:
Das Obige ist der gesamte Inhalt Weitere Informationen zur CSS-Animation finden Sie in der Spalte CSS3-Video-Tutorial! ! !
Das obige ist der detaillierte Inhalt vonSo implementieren Sie eine CSS-Rotationsanimation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
