So implementieren Sie eine CSS-Rotationsanimation

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!