如何理解 css3 的 perspective 属性
一、写在前面的话
最近想多了解一下CSS3的transform 3D效果，transform：英文直译就是转换，它可以实现旋转、缩放、位移等效果，听起来有没有觉得很酷的样子，狠狠的点这里来看看旋转和位移的效果。
你应该会看到这样的效果：
纳尼？这是3D？怎么一点也不酷呢？
二、让3D效果显示出来
看不到3D效果，那是因为我们没有加上 prespective 属性，我们在外层DIV上加上 prespective: 50; ，再狠狠的点这里来看看旋转和位移的效果。
你应该会看到这样的效果：
是不是有那么点酷了，但你知道 prespective: 50; 是怎么起作用的么？我们来一探究竟。
三、先来感性的理解3D
当我在网上找到下面这张图的时候，顿时心里咯噔一下，千言万语不如一张图说的明白啊，那个网状的平面你可以理解为我们的显示器，这样一个立体的概念是不是就在脑子里开始有了呢？
如果还没概念，我们以旋转为例来继续说明
rotateX就像单杠
rotateY就像钢管舞
rotateZ就像旋转的风扇
四、如何理解prespective
终于说到本文的核心了，prespective属性有两个作用，一是开关，通过它来打开和关闭3D透视效果，二是设置透视的距离。
设置 prespective:none; 是关闭透视效果，设置 prespective:50; 是打开透视效果并设置透视的距离是50像素，你可以理解为在显示器前50像素的距离看到的透视效果，而对于什么是透视效果，可以看这张图：
人眼对物体的视觉效果呈现的是近大远小的特点，perspective属性展现的就是这种效果。
回到之前的DEMO，右边有背景的DIV跟虚线边框的DIV其实是一样大小，只是右边有背景的DIV的Z轴向前移动了20像素，在透视效果下就显示比虚线边框的DIV面积要大些。
五、2种方式设置perspective
除了之前说到的在父元素上设置 prespective:50; 外，还有一种方式是通过 transform在子元素上设置，如：transform: perspective(50px) rotate(45deg); ，这2种方式设置的效果是不一样的。
- prespective:50; 是以当前父元素的转换位置为视点看到的透视效果；
-
transform: perspective(50px) rotate(45deg); 是以当前子元素的转换位置为视点看到的透视效果；
PS：请注意两种方式的值写法，一个不要单位，一个要单位。
说了这么多，不知道各位对perspective 是否完全理解了呢，欢迎探讨？
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
