Example code for implementing ellipse trajectory rotation using CSS3

Recently, the following effects need to be achieved

Initially, using css3D rotation to write, can only achieve the following effects

I can't turn all the circles to the front. I don't know if my operation is wrong or 3D rotation is not possible. If anyone knows, please enlighten me.

Since it cannot be realized in 3D, we can only turn to 2D. As long as we can realize the rotation according to the ellipse, it will be ok.

X-axis and Y-axis move within a rectangle

Path is a slash

 .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;}
} 

Setting animation delay

Set the Y-axis delay to half the animation duration. You can see that the motion trajectory becomes a diamond shape. It feels a bit better.

 .ball {
    animation: 
      animX 2s linear 0s infinite alternate,
      animY 2s linear -1s infinite alternate
  } 

Sets a 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
  }

Zoom in and out

In order to make it look three-dimensional, add scale attribute. The scale animation should be the sum of the time of the X-axis and the Y-axis.

.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)
   }
 } 

Mission accomplished!

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.