先上两个短视频感受一下
知乎视频www.zhihu.com图一，是一种具有透视感的正方体，他正在围绕自己的中心转动。
知乎视频www.zhihu.com
图二，基于图一正方体的基础上，构建了一堆长方体，放在一个容器里，像是一个简单的城市建模，他也在围绕自己的中心转动。
上述两个demo均采用css3新特性实现，保持良好的性能基础下，让三维世界在浏览器中有施展拳脚的地方。
好了，上面两段描述中其实蕴含了所有实现他们的必要元素，那么下面我们来一一了解一下。
上述用到的css3有transform-style, transform-origin, transform, animation, 以及perspective, perspective-origin这五个特性，在他们的共同作用下，创造了图二所示的3D世界。
以下用循序渐进的方式来拆分上述五个特性为3D + 动画两个部分；
动画部分，transform: rotate + animation, 这两个特性让一个div可以具有周期动画像，像下面的示例：
我们使用animation特性给容器添加一个2s自循环的Round动画（绕着Z轴从-180度转动到180度），这里有一个默认的旋转中心transform-origin: center center的设定，即旋转（rotate）中心在容器的中心，z轴定义如下图中的木棍：
，另外还有绕x，y轴的旋转比较容易理解，上述部分构成了动画的部分；
重点在于3D视图的构建，里面有两个点，一个是如何在3D空间中展示原有的2D元素，第二个是在3D展示的基础上加入一定的视觉差，增强3D的感觉。
首先是如何在3D空间中展示, 在此之前，得先了解在2d环境中，元素的的一些转变是如何进行的，举个例子，在2d环境中旋转一个元素：
图中实现的是，容器绕x轴从-180度转至180度，直观上我们能看到的不是蓝色小方块在旋转而是在伸缩，此时perspective隆重登场，代码也很简单，只增加一句话
整个蓝色容器的父容器上添加perspective: 500px;再来看效果：
此时，蓝色小方块就表现出了3D环境中即我们所处现实环境中旋转的效果，那perspecive是何方神圣？
官方定义是：perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
翻译一下就是元素离屏幕的距离，这会产生一个视觉差的效果，离你眼睛越近的物体越大，距离越远越小，生活中直观的感受就是，人坐在飞机上俯视地面建筑，会觉得很小，但当你走在马路上看建筑就特别大，这种感官上的变化就构筑了这种3D的视觉差。
好了，3D的视觉差有了，离短视频一还有一点点距离，这个立方体是怎么来的呢？
根据现实生活经验，立方体是由六个面组成，例如：
在perspective的基础上我们先试一试两个面，也通过简单的例子：
发现不对，有了视觉差的特性之后，作为子元素的橙色小方块，并没有如期出现旋转的效果，我们看到的仍是‘伸缩’。
这里出现了一个新的问题，即使使用了视差（perspective）的特性，对于多个嵌套元素而言，并不会具备3D的视觉效果，那如何在3D环境中展示3D的转换效果？ 这时候transform-style出场了，同样官方定义如下：指定嵌套元素是怎样在三维空间中呈现，默认值是flat，我们需要用到的值是presever-3d, 设置好之后再看下效果：
达到了我们想要的3D旋转的效果，前提条件似乎已经差不多了，我们尝试来搭建一下这个立方体吧：
最终我们实现了立方体的建模！需要注意的是，这种嵌套元素做出来的立方体，在进行transform变化的时候，整个立方体的变化是依据的最外层的父元素。so，最后我们给最外层的父元素加上转动的效果：
大功告成！
总结一下：上述效果的实现，所有我们用到的主要css特性包括transform-style(在3D环境中如何展示嵌套元素)，transform（旋转rotate），animation(给元素添加动画），perspective（给元素一个视差的效果，模拟生活中真实的3D环境）；额外也用到了一些特性比如transform-fill-mode,有兴趣的小伙伴可以咨询查阅～
最后，我们学会了上述用css3进行3D建模的能力之后，就可以发挥我们的想象力，作出各种各样的3D动画特效～ 奥力给！
扫一扫
1073
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
