对了，我还没有说明我的光源理论来的，不好意思，下面就来聊聊我自己的光源理论(理论是博主自己的心得来的，有错希望各位大神指出)，上图
已知手电筒是发散的光源（即非平行光），如果这个时候有一个物体(图中对应的是BOOK)绕着Y轴在旋转，，那么我们假设在这本书的后面有一面墙，那么墙最后呈现的效果是出现了一个菱形，这个与我们看到的GIF图像在每帧位置上面相对应。实际上，上面的图像说到底也就是菱形的变换然后套接一个animate。如果是没有设置perspective属性，那么就会出现我说所的平行光的效果,平行光效果，请看下图
相信大家都看出来是什么效果吧，就是平行光效果就是说：如果是平行光照射到物体上面，即使物体绕着Y轴旋转，那么最后在页面上呈现的效果也是一个矩形边框的变
perspective属性就说到这里了，在上面的例子中我们还提到了另外的一个属性就是 transform-style:preserve-3d;这个属性其实就相当于创建一个3D的空间
我们这里就来假设一下，假设perspective对应的是发散光源，transform-style对应的是一个舞台，如果舞台是一个2维的也就是像电视一样的，那么这样最后也产生不来一个3D的效果，但是如果舞台是一个3D，例如舞台是一个京剧舞台，那么这个3D的舞台投影上就可以看到3维的变化，所以我们急需要perspective属性来设置"光源"类型,也需要transform-style来设置一个投影的3D空间.
在使用perspective的时候我们需要注意的是如果把这个属性加在某些具体元素上面并且旋转的角度相同，那么这些元素所呈现的效果是相同的，这个正好可以用perspective类比为光源来解释，如果在每个对象上面加上个一个光源，那么投影就是一样的，但是如果是加在这些元素的父节点上面，那么元素所呈现的效果是不同的，这个的解释是我们把光源加在这些元素上面，那么我们可以把这些元素看成是一个这些元素都在一个平面上面，那么因为因为光源的位置是一定的，但是每个元素在平面上面的位置不一样，所以呈现的就是不同的效果(这个可能比较抽象难以理解，如果有疑问的话可以在后面留言)
perspective-orgin:这个属性相当于是设置坐标的原点，因为默认的原点是在图像的中心位置，但是有时候我们可能像旋转的中心的位置变换一下，这个时候，这个属性就可以满足我们的需求
backface-visibility：这个属性是用来设置3D的背景是不是透明的，选项有visible|hidden，默认的是hidden
四、案例练习
先来看一下效果：
