This is the sixth day of my participation in the First Challenge 2022

preface

Hello everyone, I do not eat fish D cat, in front of you said CSS animation, today we will write a fun CSS, play your unimaginative imagination, let’s write a ball, can also be small ball around the big ball, like the moon in the solar system around the earth rotation. So let’s think about forming a ball.

The formation of the ball

\

The premise

First of all, we know, in mathematics, a rule is relying on the 2 d graphics rotating, such as cone is relying on a right-angle side of a right triangle rotation, and columns can be from any side of the rectangle rotating, the ball is also a rule of three-dimensional graphics, can be caused by a circle the diameter of the rotation from it. So we can think of a solid as being made up of an infinite number of faces.

The realization of the ball

So we increase the number of faces of the circle in the box, of course the box must declare 3d space first. transform-style: preserve-3d; Here we use 9 circles (rounded borders) to form a ball and make it spin, like a ball is spinning. As is shown in

Then declare the two small boxes in each of the three big round boxes, taking care to declare the big boxThe 3 d spaceThe displacement up and down is related to the radius of the little circle, so let’s look at the front view of the ball. You can imagine, in three dimensions, that line segment in the middle represents a circle.

The structure is as follows:

<! -- Big ball in the middle --><div class="box">
            <div class="ball1">
                <div class="ball1_1"></div>
                <div class="ball1_2"></div>
            </div>
            <div class="ball2">
                <div class="ball2_right"></div>
                <div class="ball2_left"></div>
            </div>
            <div class="ball3">
                <div class="ball3_1"></div>
                <div class="ball3_2"></div>
            </div>
        </div>
Copy the code

After animating the big ball, it now resembles a ball, as shown in the following GIF:

 /* Animation of ball rotation */
        @keyframes rotate_box {
            0% {
                transform: rotate3d(1.1.1, 0deg);
            }
            100% {
                transform: rotate3d(1.1.1, 360deg); }}Copy the code

The most important thing is to set it upThe 3 d spaceOtherwise, it won’t achieve the effect. After the ball formed, the box shadow was added to the above GIF box-shadow: 0px 0px 100px red;It looks like a skeleton, but we can also add a box shadow to make it look like a skeleton. Of course, the background color must be dark.

orbital

rendering

implementation

The ball is formed, and we need to add orbits, as you can see in the picture above, which is actually a big box, and the first thing to do is to declare 3d space and position the ball in orbit, like a planet’s moon. The balls are made the same way as the big balls, and then we’re going to rotate the track inward with a fixed value, and then we’re going to animate the rotation. I’m going to rotate the orbit, the ball is already on the orbit, it’s going to rotate with the orbit. The structure is as follows:

<! -- - -- -- ><div class="border_1">
        <! -- Little ball in orbit -->
        <div class="box_1">
            <div class="ball1 box_1_color">
                <div class="ball1_1 box_1_1"></div>
                <div class="ball1_2 box_1_2"></div>
            </div>
            <div class="ball2 box_1_color">
                <div class="ball2_right box_1_1"></div>
                <div class="ball2_left box_1_2"></div>
            </div>
            <div class="ball3 box_1_color">
                <div class="ball3_1 box_1_1"></div>
                <div class="ball3_2 box_1_2"></div>
            </div>
        </div>
        <! -- Big ball in the middle -->
        <div class="box">
            <div class="ball1">
                <div class="ball1_1"></div>
                <div class="ball1_2"></div>
            </div>
            <div class="ball2">
                <div class="ball2_right"></div>
                <div class="ball2_left"></div>
            </div>
            <div class="ball3">
                <div class="ball3_1"></div>
                <div class="ball3_2"></div>
            </div>
        </div>
    </div>
Copy the code

Animation of orbit rotation:

   /* Animation of track rotation */     
        @keyframes rotate_border {
            0% {
                transform: rotatex(80deg) rotate3d(0.0.1, 0deg);
            }
            100% {
                transform: rotatex(80deg) rotate3d(0.0.1, 360deg); }}Copy the code

The effect is as follows: similar to a satellite orbiting a planet

conclusion

Writing this, we still need to be aware of 3d animation and positioning properties. As I said in the previous article, you can write about more balls, more orbits, and whether this can form a galaxy, as shown in the picture below: