动效开发 2:聊一聊 3D
我们在前一小节的案例中制作了一个立方体,其实就已经接触到了 3D。
所有东西一跟 3D 扯上关系,复杂指数都是噌噌噌往上走。不过也正常,毕竟多了一个维度,要有三维应有的尊严。
3D Transforms 要怎么写?能写翻牌效果吗?能写翻书效果吗?能写出立体书的效果吗?往下看,答案都在这里面。
很多时候,仅仅将元素进行二维层面的变换显然不是人类的终点,毕竟十二维空间都可能不是极限(视频: 从一维空间到十二维空间)。
Intro to 3D Transforms 的作者 David DeSandro 说,现在可是 21 世纪,可我们竟然还在跟三十年前的二维空间界面扯皮。所幸 2011 年,我们有了 CSS3,我们还有了 3D Transforms,真是一个值得奔走相告的大事件。
3D 变换相较 2D 变换,坐标系中多了 Z 轴,也就意味着物体除了上下左右,还可以前后移动。而 rotate 在 2D 中的旋转方式,在 3D 中与 rotateZ 相当。
那么,单纯地将 transform 中的参数扩展出 Z 维度,就能实现 3D 效果了吗?我看见 CSS3 笑了。