An article explaining how to implement elliptical trajectory rotation with css3 (summary)

In the previous article "Teach you step by step how to use Vue2 code to change to Vue3 (detailed pictures and texts)", I introduced you how to use Vue2 code to change to Vue3. The following article will let you know about css3 to realize elliptical trajectory rotation. Friends, keep it in your collection~

css3 to realize elliptical trajectory rotation

Recently You need to achieve the following effect

At first, use css3D to rotate and write, but you can only achieve the following effect

I can't turn all the circles to the front. I don't know if my operation is wrong or if 3d the rotation cannot be achieved. If anyone knows, please give me some advice.

It doesn't work3d can only be realized to rotate 2d, as long as it is rotated according to the ellipse, it will be ok

1. The X-axis and Y-axis move within a rectangle

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

2. Set the animation delay

Set the Y-axis animation delay to half the animation duration (the delay is set to a negative animation There will be no delay blank at first. Interested students can try positive delay). You can see that the motion trajectory becomes a diamond shape, which feels a bit like

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

3. Set the 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 in and out

Add the scale attribute in order to look three-dimensional. , 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)
   }
 }

You’re done!

Full effect address: https://codepen.io/yaowei9363/pen/PyXvNe?editors=1100

Recommended learning: CSS3 video tutorial

The above is the detailed content of An article explaining how to implement elliptical trajectory rotation with css3 (summary). For more information, please follow other related articles on the PHP Chinese website!