CSS3 uses transform-origin to achieve dot distribution on a large circle and rotation effects

First, we need to use the transform-origin attribute. The transform attribute must be used. It has many attributes. We only need to use the rotate attribute of transform (to set the 2D rotation angle), and then use transform-origin to set its center point. Finally, match it with the CSS3 animation attribute animation. Complete the effect we want.
First, the effect picture:

Circles are dynamic.
Here are the steps:
1. Use of transform attribute:
We just need to use this property to set the position of the point on the circle where we need it. transform:rotate(the degree you need). In addition, we need to pay attention to one point ( if the small circles need to be distributed on the edge of the big circle, we need to set the relative attribute position: relative for the big circle and the absolute attribute position: absolute for the small circle to prevent the small circle from running outside the big circle ). So we have completed the first step.
2. Use of transform-origin attribute:
First we need to understand the meaning of the transform-origin attribute. It can set 3 properties, which I understand to be the three axes XYZ in sequence. We need to use XY2 axes here. Its default properties are 50% 50% 0. So what does this mean? It's very simple, just set the upper left corner of the node that sets the transform-origin attribute as the starting point. Move 50% on the X axis and 50% on the Y axis. Of course, if the center point you want is not inside the node, you can use PX to specify the center point outside the node. In the second step, we can get the effect of a small circle distributed on the boundary line of the big circle.
3. Use of animation attributes:
Similarly, first we need to know that the animation attribute is animation, please refer to the document for details. This is what we need.

animation:myfirst 10s linear infinite;

myfirst: Id for binding @keyframes
10s: time
linear: uniform speed
infinite: continuous

Finally, with @keyframes

 @keyframes myfirst{
    0%{
      transform: rotate(0);
    }
    25%
      transform:rotate(90deg);
    }
    50%{
      transform:rotate(180deg);
    }
    75%
      transform:rotate(270deg);
    }
    100%{
      transform: rotate(360deg);
    }
  }

Finished

This is the end of this article about using transform-origin in CSS3 to achieve dot distribution on a big circle and rotation effects. For more related content about using transform-origin in CSS3 to achieve dot distribution on a big circle and rotation effects, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!