《前端实战总结》之使用 CSS3 实现酷炫的 3D 旋转透视

3D动画效果现在越来越普及,已经被广泛的应用到了各个平台,比如阿里云,华为云,webpack官网等。它可以更接近于真实的展示我们的产品和介绍,带来极强的视觉冲击感。所以说,为了让自己更加优秀,css3 3D动画必不可少。
你将学到
CSS3 3D 转换的常用API介绍
CSS3 3D 应用场景
CSS3 3D 实现一个立方体
开始
1.CSS3 3D 转换的常用API介绍
首先先上一张css 3D的坐标系:

接下来我们来介绍几个常用的api:
旋转
rotateX()
rotateY()
rotateZ()以上几个api分别代表绕x,y,z轴旋转,如下例子为绕x轴旋转的例子:

相关代码如下:
位移(Transform)
translateX(x) 定义 3D 转化,仅使用用于 X 轴的值
translateY(y) 定义 3D 转化,仅使用用于 Y 轴的值
translateZ(z) 定义 3D 转化,仅使用用于 Z 轴的值以上几个api分别代表相对x,y,z轴的位移,如下例子为向z轴位移的例子:

这里我们需要注意的是为了能看出位移的效果,我们需要在父容器上加如下属性:
当为元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身。代码如下:
3D缩放
scaleX(x) 给定一个 X 轴的3D 缩放转换值
scaleY(x) 给定一个 Y 轴的3D 缩放转换值
scaleZ(x) 给定一个 Z 轴的3D 缩放转换值缩放设置和上面的类似,这里就不做过多介绍了。
理论上说以上三种常见变换已经够用了,值得关注的是我们要想让元素呈现出3D效果,以下不可忽视的API也很重要:

2.CSS3 3D 应用场景
css 3D主要应用在网站的交互和模型效果上,比如:
3D轮播图
3D产品介绍
室内3D仿真
h5 3D活动页面,比较典型的就是某年淘宝的年终总结H5
3D数据可视化成图
3D模型图其实如果css 3D用的熟悉了,一些基本的3D模型完全可以用css画出来。
3.CSS3 3D 实现一个立方体

核心思路就是用6个面去拼接,通过设置rotate和translate来调整相互之间的位置,如下:

具体代码如下:
html结构
扩展
我们可以基于上面介绍的,给父元素添加动画或者拖拽效果,这样就可以做成更有交互性的3D方块了,比如置骰子游戏,vr场景,3D相册等等,具体实现我会抽空依次总结出来,记得关注哦~
最后
如果想了解更多webpack,node,gulp,css3,javascript,nodeJS,canvas等前端知识和实战,欢迎在在微信搜索 趣谈前端 一起学习讨论,共同探索前端的边界。
版权声明: 本文为 InfoQ 作者【徐小夕】的原创文章。
原文链接:【http://xie.infoq.cn/article/b696db746f126d01ff2911a20】。文章转载请联系作者。
评论