How to realize rotation Animation with CSS
This article mainly explains "CSS how to achieve rotation animation", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "CSS how to achieve rotation animation" bar!
Rotate along the X axis
Specify the direction of rotation in the code. This time the starting point is 0 degrees and the end point is 360 degrees (a rotation), specifying the rotation in the X axis. Then use the mouse to hover to rotate the picture.
Animation-duration is the time of animation processing, and animation-iteration-count is the number of animation processes.
@ keyframesturnX {
0% {transform:rotateX (0deg);}
100% {transform:rotateX (360deg);}
}
# rX:hover {
Animation-name:turnX
Animation-duration:3s
Animation-iteration-count:1
}
When you place the mouse over the image, rotate along the X axis, and the effect is as follows:
GIF.gif
Rotate along the Y axis
The rotation is almost the same as that of the X axis. Only rotations that change to the Y axis direction.
@ keyframesturnY {
0% {transform:rotateY (0deg);}
100% {transform:rotateY (360deg);}
}
# rY:hover {
Animation-name:turnY
Animation-duration:3s
Animation-iteration-count:1
}
Thank you for your reading, the above is the content of "how to achieve rotation animation in CSS". After the study of this article, I believe you have a deeper understanding of how to achieve rotation animation in CSS, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!
