1、CSS3实现球体旋转CSS3实现球体旋转本教程简述如何用CSS3实现旋转的球体效果如下图所示,球体沿着中间的轴旋转:要理解的知识点1 三维空间的透视属性css属性:perspectiveperspective 属性有两个值,none 和 自己定义的具体像素,例如1000px。注意:当为元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身,所以我们可以把这个属性理解为照相机和被拍摄物体的距离,CSS3 3D 变换中透视的透视点是在浏览器的前方,当我们设置它的值为具体数值的时候,其子元素就会具有近大远小,近实远虚的效果。目前这个属性对浏览器支持还不算太好,只有Chrom
2、e 和 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轴
3、表示横向的轴y轴表示纵向的轴z轴其实就是我们的视线,是与我们直视的水平面垂直的如果一个元素沿着x轴旋转,可以想象成奥运单杆运动员那样运动如果一个元素沿着y轴旋转,可以想象成公园旋转木马沿着中间的柱子绕圈圈而元素沿着z轴旋转的话更好理解了,可以想象成视线正前方,有一个风扇,风扇的扇叶就是沿着z轴旋转的关于3d的一些相关属性,介绍完毕,那么开始案例制作结构和样式(代码如下,具体属性都添加了对应注释)12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
4、56575859606162ball*padding:0;margin:0;list-style:none;border:0;bodybackground:#000;/*设置透视盒子在浏览器水平和垂直都居中*/.ballwidth:300px;height:300px;position:absolute;left:50%;top:50%;margin-left:-150px;margin-top:-150px;perspective:3000px;-webkit-perspective:3000px;/*设置此元素子元素保留3d位置*/.ball_inposition:absolute;lef
5、t:0;top:0;width:100%;height:100%;transform-style:preserve-3d;/*实体化这些li,然后设置其为圆形*/.ball_inliposition:absolute;left:0;top:0;width:100%;height:100%;border:1pxsolid#fff;border-radius:50%;/*对不同的li沿着y轴旋转不同的角度,其实圆球体就出来了*/*5个li元素,所以每个旋转的角度是360/2/5=36deg*/.ball_inli:nth-child(1)transform:rotateY(0);.ball_inl
6、i:nth-child(2)transform:rotateY(36deg);.ball_inli:nth-child(3)transform:rotateY(72deg);.ball_inli:nth-child(4)transform:rotateY(108deg);.ball_inli:nth-child(5)transform:rotateY(144deg);效果如图:此时我们给球体整体则.ball_in元素沿着x轴向前倾斜和沿着z轴向左倾斜一定角度,则立体感更强。代码:12345678910.ball_inposition:absolute;left:0;top:0;width:10
7、0%;height:100%;transform-style:preserve-3d;/*球体向前倾斜30deg,向左倾斜30deg*/transform:rotateX(-30deg)rotateZ(-30deg);效果如图:利用伪元素给球体添加中心轴,代码如下:12345678910/*利用伪元素给球体添加中心轴*/.ball_in:aftercontent:;position:absolute;width:2px;height:500px;background:blue;left:150px;top:-100px;效果如图:最后步骤,给每个li添加颜色和整个球体添加旋转的动画:整个球体添
8、加旋转的动画代码如下:123456789101112131415161718.ball_inposition: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:circle10slinearinfinite;/*定义旋转动画*/keyframescircle0%transform:rotateX(-30deg)rotateZ(-30deg)rotateY(0);100%transform:rotateX(-30deg)rotateZ(-30deg)rotateY(360deg);最终效果如图:(绕着y轴转圈圈)是否觉得五颜六色的球体没意思?其实还可以改装一下,搞点小意思,例如球体不需要那么多个面,然后把剩余的面换成好看的图片,改装后效果如图:有没有一种cd在三维空间旋转的感觉?又或者我们再改装一下,效果如下图:
copyright@ 2008-2022 冰豆网网站版权所有
经营许可证编号:鄂ICP备2022015515号-1