How to use css3 to realize Ellipse track rotation
This article mainly introduces how to use css3 to achieve elliptical trajectory rotation, the article is very detailed, has a certain reference value, interested friends must read it!
Realization of Ellipse trajectory rotation by css3
Recently, the following effects need to be achieved
At first, use css3D to rotate and write, and you can only achieve the following results
There is no way to turn all the circles to the front. I don't know if my operation is wrong, or 3D rotation can not be realized. If you know, please give me some advice.
If you can't use 3D, you can only turn to 2d, as long as you rotate according to the ellipse, you will ok.
1. X axis Y axis moves in a rectangle
The path is diagonal.
.ball {animation: animX 2s linear infinite alternate, animY 2s linear infinite alternate} @ keyframes animX {0% {left: 0px;} 100% {left: 500px;}} @ keyframes animY {0% {top: 0px;} 100% {top: 300px;}}
2. Set animation delay
Set the delay of the Y-axis animation to half the length of the animation (the delay is set to negative and there will be no delay blank at the beginning of the animation. Interested students can try positive delay). You can see that the motion track has become a diamond.
.ball {animation: animX 2s linear 0s infinite alternate, animY 2s linear-1s infinite alternate}
3. Set cubic Bezier curve
.ball {animation: animX 2s cubic-bezier (0.36,0,0.64,1)-1s infinite alternate, animY 2s cubic-bezier (0.36,0,0.64,1) 0s infinite alternate}
4. Zoom out and enlarge
To add scale attributes to look three-dimensional, the scale animation should be the sum of time on the X and Y axes
.ball1 {animation: animX 2s cubic-bezier (0.36,0,0.64,1)-1s infinite alternate, animY 2s cubic-bezier (0.36,0,0.64,1) 0s infinite alternate, scale 4s cubic-bezier (0.36,0,0.64,1) 0s infinite alternate @ keyframes scale {0% {transform: scale (0.7)} 50% {transform: scale (1)} 100% {transform: scale (0.7)}}
The above is all the contents of the article "how to use css3 to achieve elliptical trajectory rotation". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!
