juejin小册| H5 |5动效开发 2：聊一聊 3D

动效开发 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 笑了。

p