本帖最后由 欧水萍 于 2016-11-11 15:11 编辑
CSS3实现球体旋转
本教程简述如何用CSS3实现旋转的球体
效果如下图所示,球体沿着中间的轴旋转:
要理解的知识点
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,当元素设置了这个值的时候,其子元素就相当于进入了三维空间。
如图所示&