css3 transform 3d详解

transform2d的教程网上有很多，但是3d的还是比较少，关于透视研究了很长时间才算是了解，下面详细的解释一下transform中3d变形的原理。

让我们来看一下transform-style这个属性，这个属性一定是应用在父元素上的，它有两个值preserve-3d/flat

,我们可以把父元素当成是一个容器，所有的子元素都是放在这个容器里的，那么当设置父元素的transform-style=flat的时候，这个父元素就是一个平面，所以它里面的子元素都是放在这个平面里的，所以这个父元素就好像是一张纸一样，无论我们在这张纸上画了什么，是一个平面图或者是画了一个立体图，当我们旋转这个父元素也就好像是在旋转一张纸。

那么当设置transform-style=preserve-3d的时候，这个父元素就变成了一个立体容器，那么当我们在这个容器里放了另一个立体物体，当旋转这个容器的时候我们也能看到立体效果啦，让我们来看下面的图：

下面这张图是一张立体图，我们可以看到近大远小的立体效果

 这张图是当设置transform-style=flat时，旋转父元素看到的效果，我们可以看到旋转之后其实我们是看不到立体效果的。

 

下面这张图是当设置transform-style=preserve-3d时，旋转父元素看到的效果，我们可以看到旋转之后我们就可以看到立体效果了

明白了吗？transform-style是用来设置父元素是平面或者还是立体的一个属性。

下面再来看下一个很难懂的属性perspective，这个属性是用来设置我们是否能看到透视效果的，注意是是否可以看到,这和元素是否是立体的无关，元素是否是立体的和transform-style有关。这个属性可以用在父元素上，也可以用在子元素上。我们先研究为父元素设置perspective的情况，我们来看一下perspective是什么意思。先看一下3d坐标系：

网格部分就相当于屏幕，那么当我们设置rotate的时候物体就是沿着这个坐标轴来进行旋转的。

那么什么叫透视呢？我们先来看一下人眼是如何成像的：A是我们看到的物体，B是眼球，h处是视网膜，我们的视网膜到眼球的距离，也就是y是不变的，那么当物体离我们越远，在视网膜上的成像就越小，所以我们看物体就会觉得越小。所以透视就是模拟我们现实观察物体的真实感觉。

在这里的perspective是什么意思呢？这个值是指眼球与屏幕的距离，当然，是模拟的啦，我们来看下图：第一幅图是设置perspective=1000px，第二幅图是设置perspective=100px，我们先来看离我们最近的这幅图，这幅图的z轴坐标是0，当我改变perspective的值的时候，我们看到这幅图在屏幕上的大小是不变的。而其它的图片大小确是变化的，那么好，让我们来结合人眼成像原理来理解一下它的原理。

 

 

 
 我们知道perspective是指眼球与屏幕的距离，也就是上图的x值，而眼球和视网膜的距离是不变的也就是y的值是不变的，那么，现在的情况是让我们忘了我们的眼睛吧，现在，你的屏幕就是你的视网膜，那么当物体与眼球的距离不同，也就是x的值不同的时候，我们如何让图像呈现在视网膜也就是屏幕上的图像的大小不变呢？当然是要改变y的值啦，好了，我们来设置perspective=100px，我们来假设最容易计算的方式，还是看上面的图，假设A1所在的位置就是z=0的位置，x1=100px，B是什么呢？不要把B当成我们自己的眼睛，B是计算机模拟出来的眼球。h处就是我们的屏幕，我们现在假设A1的高度是s1，h1是我们屏幕上看到的高度，我们想要s1=h1怎么办？很容易啦，另y=x1，好了，我们的电脑把模拟的眼球放在固定的位置上了，那么我们再来在我们模拟的眼睛世界里放东西吧，我们如果想要使A1看起来有原来的两倍大怎么办？这里需要一点三角形的知识，大家自己算一下，可以知道把A1放到z=50px的地方就可以看到两倍大小的图像了。就像下图一样：

 

 好了，现在理解perspective值的意思了吧？它的意思就是让电脑模拟出人眼和视网膜，所以不要带入我们自己的眼睛。

以上