CSS3实现球体旋转

2016-12-19 本文已影响1808人小码哥教育520it

本教程简述如何用CSS3实现旋转的球体

效果如下图所示，球体沿着中间的轴旋转：

1478667349133032.png

要理解的知识点

1 三维空间的透视属性
css属性：perspective
perspective 属性有两个值，none 和自己定义的具体像素，例如1000px。
注意：当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身，所以我们可以把这个属性理解为照相机和被拍摄物体的距离，CSS3 3D 变换中透视的透视点是在浏览器的前方，当我们设置它的值为具体数值的时候，其子元素就会具有近大远小，近实远虚的效果。
目前这个属性对浏览器支持还不算太好，只有Chrome 和 Safari 支持替代的 -webkit-perspective 属性。
2 css属性transform-style
这个属性浏览器支持情况良好，除了ie浏览器，其他浏览器都支持。Firefox 支持 transform-style 属性，而Chrome、Safari 和 Opera 支持替代的 -webkit-transform-style 属性。
transform-style属性是设置其子元素是否保留3d位置的。
它也是有两个值：
1 默认值是flat,表示其子元素不保留3d位置。
2另一个值是preserve-3d，当元素设置了这个值的时候，其子元素就相当于进入了三维空间。

如图所示：

1478668191101972.png

x轴表示横向的轴
y轴表示纵向的轴
z轴其实就是我们的视线，是与我们直视的水平面垂直的

如果一个元素沿着x轴旋转，可以想象成奥运单杆运动员那样运动~
如果一个元素沿着y轴旋转，可以想象成公园旋转木马沿着中间的柱子绕圈圈~
而元素沿着z轴旋转的话更好理解了，可以想象成视线正前方，有一个风扇，风扇的扇叶就是沿着z轴旋转的~

关于3d的一些相关属性，介绍完毕，那么开始案例制作

结构和样式
（代码如下，具体属性都添加了对应注释）

<!doctype html>
<html>
<head>
      <meta charset="UTF-8">
      <title>ball</title>
    <style>
      *{padding: 0; margin: 0; list-style: none; border: 0;}
      body{background:#000;}
      /* 设置透视盒子在浏览器水平和垂直都居中 */
      .ball{
           width: 300px;
          height: 300px;
           position:absolute;
           left: 50%; top: 50%;
           margin-left: -150px;
           margin-top: -150px;
           perspective:3000px;
           -webkit-perspective:3000px;
       }
       /* 设置此元素子元素保留3d位置 */
      .ball_in{
           position:absolute;
           left: 0;
           top: 0;
           width: 100%;
           height: 100%;
            transform-style:preserve-3d;
      }
      /* 实体化这些li，然后设置其为圆形 */
      .ball_in li{
           position:absolute;
           left: 0;
           top: 0;
           width: 100%;
           height: 100%;
           border: 1px solid #fff;
            border-radius:50%;       
      }
      /* 对不同的li沿着y轴旋转不同的角度，其实圆球体就出来了 */
      /* 5个li元素，所以每个旋转的角度是360/2/5=36deg */
      .ball_in li:nth-child(1){transform:rotateY(0);}
      .ball_in li:nth-child(2){transform:rotateY(36deg);}
      .ball_in li:nth-child(3){transform:rotateY(72deg);}
      .ball_in li:nth-child(4){transform:rotateY(108deg);}
      .ball_in li:nth-child(5){transform:rotateY(144deg);}
    </style>
</head>
<body>
  
<div><!--设置透视属性的盒子，其子元素将具有透视效果-->
      <ul><!--设置其子元素保留3d位置的元素-->
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
      
</body>
</html>

效果如图：

1478668644890026.png

此时我们给球体整体则.ball_in元素沿着x轴向前倾斜和沿着z轴向左倾斜一定角度，则立体感更强。

代码：


    
.ball_in{

           
position:absolute;

           
left: 0;

           
top: 0;

           
width: 100%;

           
height: 100%;

           
transform-style:preserve-3d;

           
/* 球体向前倾斜30deg,向左倾斜30deg */

           
transform:rotateX(-30deg) rotateZ(-30deg);

      
}

效果如图：

1478668744728269.png

利用伪元素给球体添加中心轴，代码如下：


      
/* 利用伪元素给球体添加中心轴 */

      
.ball_in:after{

           
content:"";

           
position:absolute;

           
width: 2px;

           
height:500px;

           
background:blue;

           
left:150px;

           
top:-100px;  

      
}

效果如图：

1478668813915716.png

最后步骤，给每个li添加颜色和整个球体添加旋转的动画：

整个球体添加旋转的动画代码如下：


.ball_in{

           
position:absolute;

           
left: 0;

           
top: 0;

           
width: 100%;

           
height: 100%;

           
transform-style:preserve-3d;

           
-webkit-transform-style:preserve-3d;

           
/* 球体向前倾斜30deg,向左倾斜30deg */

           
transform:rotateX(-30deg) rotateZ(-30deg);

            
/* 球体旋转动画 */

           
animation:circle 10s linear infinite;

      
}

      
/* 定义旋转动画 */

      
@keyframes circle{

           
0%{transform:rotateX(-30deg) rotateZ(-30deg) rotateY(0);}

           
100%{transform:rotateX(-30deg) rotateZ(-30deg) rotateY(360deg);}

      
}

最终效果如图：

（绕着y轴转圈圈）