标签：http for ar cti div html htm .net
最近想多了解一下CSS3的transform 3D效果，transform：英文直译就是转换，它可以实现旋转、缩放、位移等效果，听起来有没有觉得很酷的样子，狠狠的点这里来看看旋转和位移的效果。
你应该会看到这样的效果：
纳尼？这是3D？怎么一点也不酷呢？
看不到3D效果，那是因为我们没有加上 prespective 属性，我们在外层DIV上加上 prespective: 50; ，再狠狠的点这里来看看旋转和位移的效果。
你应该会看到这样的效果：
是不是有那么点酷了，但你知道 prespective: 50; 是怎么起作用的么？我们来一探究竟。
当我在网上找到下面这张图的时候，顿时心里咯噔一下，千言万语不如一张图说的明白啊，那个网状的平面你可以理解为我们的显示器，这样一个立体的概念是不是就在脑子里开始有了呢？
如果还没概念，我们以旋转为例来继续说明
rotateX就像单杠
rotateY就像钢管舞
rotateZ就像旋转的风扇
终于说到本文的核心了，prespective属性有两个作用，一是开关，通过它来打开和关闭3D透视效果，二是设置透视的距离。
设置 prespective:none; 是关闭透视效果，设置 prespective:50; 是打开透视效果并设置透视的距离是50像素，你可以理解为在显示器前50像素的距离看到的透视效果，而对于什么是透视效果，可以看这张图：
人眼对物体的视觉效果呈现的是近大远小的特点，perspective属性展现的就是这种效果。
回到之前的DEMO，右边有背景的DIV跟虚线边框的DIV其实是一样大小，只是右边有背景的DIV的Z轴向前移动了20像素，在透视效果下就显示比虚线边框的DIV面积要大些。
除了之前说到的在父元素上设置 prespective:50; 外，还有一种方式是通过 transform在子元素上设置，如：transform: perspective(50px) rotate(45deg); ，这2种方式设置的效果是不一样的。
transform: perspective(50px) rotate(45deg); 是以当前子元素的转换位置为视点看到的透视效果；
PS：请注意两种方式的值写法，一个不要单位，一个要单位。
说了这么多，不知道各位对perspective 是否完全理解了呢，欢迎探讨？
文章来源：http://www.gafish.net/archives/1540
如何理解 css3 的 perspective 属性,布布扣,bubuko.com
标签：http for ar cti div html htm .net
原文地址：http://www.cnblogs.com/gafish/p/3903372.html
