如何理解 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 是否完全理解了呢，欢迎探讨？

文章来源：http://www.gafish.net/archives/1540