下面是效果图：
刚学习完3D跟动画，于是突发奇想做了个这个。主要用到了H5C3动画以及3D的前端知识，还有一些几何的数学知识。
制作过程中个人感觉最麻烦的就是球形上部跟下部图块的位置的数值计算了。简单阐述下：将中间前后左右四个图块与轴线距离为170px。先看前后图块：即translateZ分别设置如下：
ul li:first-child {
transform: translateZ(170px);
}
ul li:nth-child(2) {
transform: translateZ(-170px);
}
之后设置左右的两个图块，除了设置translateX之外，还要设置roateY（90deg）：
ul li:nth-child(7) {
background-color: blue;
transform: translateX(170px) rotateY(90deg)
}
ul li:nth-child(8) {
background-color: blue;
transform: translateX(-170px) rotateY(90deg)
}
设置完前后左右四个图块后，再设置每两个图块之间的图块。使用几何知识计算出在x轴以及在Z轴的位置数值。
ul li:nth-child(3) {
background-color: yellow;
transform: translate3d(119px, 0, 119px) rotateY(45deg);
}
ul li:nth-child(4) {
background-color: green;
transform: translate3d(-119px, 0, -119px) rotateY(45deg);
}
ul li:nth-child(5) {
background-color: greenyellow;
transform: translate3d(-119px, 0, 119px) rotateY(-45deg);
}
ul li:nth-child(6) {
background-color: blue;
transform: translate3d(119px, 0, -119px) rotateY(-45deg);
}
位于中间的八个图块就设置好了，效果如下：
然后我们再计算位于上面的图块位置，这也是一个难点。我们以中间最看前的图块为例，因为位于上部的图块会沿着自身X轴反转45度，这就导致上部图块如果translateZ与中间图块相同的话，反转后两个图块的边衔接不上，上部会突出来一部分。
我们的图块长宽均为100px，经计算，会多出35px，此时，我们应将translateZ缩小35px，便可实现边界的衔接。下部的图块也是一个道理。然后对于左右两个方向的上下图块的设置也是一个道理，只是修改相对于X轴的距离。
ul li:nth-child(9) {
background-color: blue;
transform: translate3d(0, -100px, 135px) rotateX(45deg)
}
ul li:nth-child(10) {
background-color: blue;
transform: translate3d(0, 100px, 135px) rotateX(-45deg)
}
ul li:nth-child(11) {
background-color: blue;
transform: translate3d(135px, -100px, 0px) rotateY(90deg) rotateX(45deg)
}
ul li:nth-child(12) {
background-color: blue;
transform: translate3d(135px, 100px, 0px) rotateY(-90deg) rotateX(45deg)
}
ul li:nth-child(13) {
background-color: blue;
transform: translate3d(-135px, 100px, 0px) rotateY(-90deg) rotateX(-45deg)
}
ul li:nth-child(14) {
background-color: blue;
transform: translate3d(-135px, -100px, 0px) rotateY(-90deg) rotateX(45deg)
}
ul li:nth-child(15) {
background-color: yellow;
transform: translate3d(0px, 100px, -135px) rotateX(45deg);
}
ul li:nth-child(16) {
background-color: #ffff00;
transform: translate3d(0px, -100px, -135px) rotateX(-45deg);
}
效果如下：
最后再设置上下两个图块，沿X轴反转90度，之后设置translateY就可以了。
ul li:nth-child(17) {
background-color: pink;
transform: translate3d(0px, 150px, 0px) rotateX(90deg);
/* border-radius: 50%; */
}
ul li:nth-child(18) {
background-color: pink;
transform: translate3d(0px, -150px, 0px) rotateX(90deg);
/* border-radius: 50%; */
}
最后，为我们的所有图块的父盒子添加旋转动画，就实现了旋转球球的效果，老铁，给个赞呗！！！
