这是我参与2022首次更文挑战的第6天，活动详情查看：2022首次更文挑战

前言

大家好，我是不吃鱼d猫，前面给大家说了css的动画，今天我们来写写好玩的css,发挥你的天马行空的想象，咱们来写一个球，还可以小球绕着大球旋转，好像太阳系中月球绕着地球旋转一样。先想想看如何形成一个球。

球的形成

前提

首先，我们知道，在数学中，有规则的立体是不是依靠2维图形旋转而来的，比如圆锥是不是依靠直角三角形的一条直角边旋转而来的，还有圆柱可以由矩形的任意一条边旋转而来，球也是一个有规则的立体图形，可以由一个圆由它的直径旋转而来。所以我们可以把立体想象成无数个面组成的。

球的实现

所以我们在盒子中增加圆的面数，当然盒子首先肯定声明3d空间了。 transform-style: preserve-3d;我们这里用了9个圆（圆角边框来实现）来组成一个球，并且让他旋转，类似一个球在旋转。如图所示

然后分别在三个圆的大盒子中声明两个小盒子，注意给大盒子要声明3d空间向上向下位移的距离和小圆的半径是有联系的，我们来看看球的正视图。大家可以想象一下，在一个三维空间中，中间的线段代表圆。

结构如下所示：

 <!-- 中间的大球 -->
        <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>

我们给大球添加动画后，这时候就类似与一个球了，如下动图所示：

 /* 球旋转的动画 */
        @keyframes rotate_box {
            0% {
                transform: rotate3d(1, 1, 1, 0deg);
            }
            100% {
                transform: rotate3d(1, 1, 1, 360deg);
            }
        }

Untitled ‑ Made with FlexClip (3) (1).gif
最重要的还是一定要设置3d空间，否则不会达到效果的。球形成后上面动图是加了盒子阴影了 box-shadow: 0px 0px 100px red;，看起来就是个骨架，我们也可以同时加盒子内阴影，比较像一些。当然背景颜色肯定要偏暗的。

轨道

效果图

实现

球形成了，我们需要加上轨道，如上图所示，轨道其实是一个大盒子，首先肯定是声明3d空间与定位将小球定位在轨道上面，好似行星的卫星。小球也是大球的方法形成的，然后我们在让轨道向里面旋转固定值，再加上旋转的动画。让轨道旋转起来，小球已经定位在轨道上了，会随着轨道转动。
结构如下：

 <!-- 轨道 -->
    <div class="border_1">
        <!-- 轨道上的小球 -->
        <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>
        <!-- 中间的大球 -->
        <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>

轨道旋转的动画：

   /* 轨道旋转的动画 */     
        @keyframes rotate_border {
            0% {
                transform: rotatex(80deg) rotate3d(0, 0, 1, 0deg);
            }
            100% {
                transform: rotatex(80deg) rotate3d(0, 0, 1, 360deg);
            }
        }

效果如下：类似于卫星绕着行星转动

Untitled ‑ Made with FlexClip (3).gif

总结

写这个我们还是要理清楚3d动画还有定位属性。在前面的文章中我已经说了，接下来大家可以写写更多的球，更多的轨道，这样是不是可以形成一个银河系，如下图所示：

css动画实现旋转的小球

前言

球的形成

前提

球的实现

轨道

效果图

实现

总结