CSS3实现球体旋转.docxVIP

CSS3实现球体旋转本教程简述如何用CSS3实现旋转的球体效果如下图所示，球体沿着中间的轴旋转：要理解的知识点1 三维空间的透视属性css属性：perspectiveperspective 属性有两个值，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，当元素设置了这个值的时候，其子元素就相当于进入了三维空间。如图所示：x轴表示横向的轴y轴表示纵向的轴z轴其实就是我们的视线，是与我们直视的水平面垂直的如果一个元素沿着x轴旋转，可以想象成奥运单杆运动员那样运动~如果一个元素沿着y轴旋转，可以想象成公园旋转木马沿着中间的柱子绕圈圈~而元素沿着z轴旋转的话更好理解了，可以想象成视线正前方，有一个风扇，风扇的扇叶就是沿着z轴旋转的~关于3d的一些相关属性，介绍完毕，那么开始案例制作结构和样式（代码如下，具体属性都添加了对应注释）1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162!doctype?htmlhtmlhead?meta?charset=UTF-8?titleball/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/headbody??div!--设置透视属性的盒子，其子元素将具有透视效果--?ul!--设置其子元素保留3d位置的元素--?li/li?li/li?li/li?li/li?li/li?/ul/div??/body/html效果如图：此时我们给球体整体则.ball_in元素沿着x轴向前倾斜和沿着z轴向左倾