用css制作一个会动的球体

html-css08

用css制作一个会动的球体,第1张

您好,可以先画一个有立体感的球体,或者直接网上找个图片,然后给这个球体添加动画,选择强调里的陀螺旋,在效果选项里将重复次数自行设定,就可以实现让球体在地上滚动的效果。同时还可借助在图片上覆盖诸如半透明灰色和半透明白色的圆形形状来实现球体高光的视觉错觉,让滚动显得更加真实。当然,如果像前面的人所说的地球自转,我没想到实现办法。不过说回来,PPT本身只是个平面软件,所以只能靠一系列平面的视觉错觉来营造一种立体感。

3d旋转,顾名思义就是立体旋转,涉及到三个轴向,x,y, z,2D旋转只有两个轴向,x,y关键就在z轴呢,我来解释下z轴

z轴就是物体远近,近大远小,所以会使元素看上去会变大,这个是正常的,css3 3D还有个属性就是-webkit-perspective:这个的含义就是景深,就是这个元素离你的眼睛多远,这两个属性有一定的联系,

webgl可以用js调用openGL的,比如cs、极品飞车之类的游戏你应该知道,很多游戏都是openGL的,真正类似3D软件那种3D,里面有X,Y,Z轴向,构成一个立体空间,然后你可以放入一个人物、汽车或其他3D模型,上贴图,打灯光,游戏引擎实时渲染出带有凹凸、置换、颜色、漫射、反射、大气雾效、深景等通道组成成的游戏画面,openGL与3D软件渲染大原理是一样的,只是渲染精度没3D软件做图或做电影那么高,渲染算法和导入的3D模型面数、贴图大小什么的在openGL下都有限制,要保证游戏在主流的家庭电脑硬件上不卡。

css只有X,Y两个轴向,只能构成一个平面,不能构成一个真正的立体空间,你看到的网上css做的3D立方体的例子原理类似:ps里面你画三个正方形平面色块,通过拉伸、透视等方法变形把三个正方形拼成一个立体正方形盒子的三个面,这个是视觉上的欺骗,只能拼凑出简单的立体形状,css并没有在一个3D空间内生成带三个轴向的物体,也没办法通过css导入真正的3D模型来个转一圈之类的,你想用纯css做个3D机器猫就不行了。

如果是webgl,你可以建个机器猫模型,把obj格式的模型文件导入,然后指定贴图,灯光等等,加上js代码控制,可以在支持的浏览器上360角度的展示机器猫了。webgl原理就和游戏引擎一样(目前肯定没游戏引擎强大),只不过游戏引擎是用c++之类的来开发,展示的东西基本上都需要用户执行一个安装到本地电脑的过程,现在webgl你可以用js来开发,然后直接在浏览器上展示。