CSS3实现球体旋转Word文档格式.docx

1、y轴表示纵向的轴z轴其实就是我们的视线，是与我们直视的水平面垂直的如果一个元素沿着x轴旋转，可以想象成奥运单杆运动员那样运动如果一个元素沿着y轴旋转，可以想象成公园旋转木马沿着中间的柱子绕圈圈而元素沿着z轴旋转的话更好理解了，可以想象成视线正前方，有一个风扇，风扇的扇叶就是沿着z轴旋转的关于3d的一些相关属性，介绍完毕，那么开始案例制作结构和样式（代码如下，具体属性都添加了对应注释）12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758

2、59606162headmetacharset=UTF-8titleballstyle*padding:0;margin:list-style:none;border:bodybackground:#000;/*设置透视盒子在浏览器水平和垂直都居中*/.ballwidth:300px;height:position:absolute;left:50%;top:margin-left:-150px;margin-top:perspective:3000px;-webkit-perspective:设置此元素子元素保留3d位置.ball_in100%;transform-style:preserv

3、e-3d;实体化这些li，然后设置其为圆形.ball_inli1pxsolid#fff;border-radius:对不同的li沿着y轴旋转不同的角度，其实圆球体就出来了5个li元素，所以每个旋转的角度是360/2/5=36degli:nth-child（1）transform:rotateY（0）;nth-child（2）transform:rotateY（36deg）;nth-child（3）transform:rotateY（72deg）;nth-child（4）transform:rotateY（108deg）;nth-child（5）transform:rotateY（144deg）

4、;/style/headbodydiv-设置透视属性的盒子，其子元素将具有透视效果-ul-设置其子元素保留3d位置的元素-li/li/ul/div/body/html效果如图：此时我们给球体整体则.ball_in元素沿着x轴向前倾斜和沿着z轴向左倾斜一定角度，则立体感更强。代码：球体向前倾斜30deg,向左倾斜30degtransform:rotateX（-30deg）rotateZ（-30deg）;利用伪元素给球体添加中心轴，代码如下：利用伪元素给球体添加中心轴.ball_in:aftercontent:;2px;500px;background:blue;150px;-100px;最后步骤，给每个li添加颜色和整个球体添加旋转的动画：整个球体添加旋转的动画代码如下：-webkit-transform-style:球体旋转动画animation:circle10slinearinfinite;定义旋转动画keyframescircle0%transform:rotateZ（-30deg）100%transform:rotateY（360deg）;最终效果如图：（绕着y轴转圈圈）是否觉得五颜六色的球体没意思？其实还可以改装一下，搞点小意思，例如球体不需要那么多个面，然后把剩余的面换成好看的图片,改装后效果如图：有没有一种cd在三维空间旋转的感觉？又或者我们再改装一下，效果如下图：