首页 > 代码库 > 如何理解 css3 的 perspective 属性

如何理解 css3 的 perspective 属性

一、写在前面的话

最近想多了解一下CSS3的transform 3D效果,transform:英文直译就是转换,它可以实现旋转、缩放、位移等效果,听起来有没有觉得很酷的样子,狠狠的点这里来看看旋转和位移的效果。

你应该会看到这样的效果:

image

纳尼?这是3D?怎么一点也不酷呢?

二、让3D效果显示出来

看不到3D效果,那是因为我们没有加上 prespective 属性,我们在外层DIV上加上 prespective: 50; ,再狠狠的点这里来看看旋转和位移的效果。

你应该会看到这样的效果:

image

是不是有那么点酷了,但你知道 prespective: 50; 是怎么起作用的么?我们来一探究竟。

三、先来感性的理解3D

当我在网上找到下面这张图的时候,顿时心里咯噔一下,千言万语不如一张图说的明白啊,那个网状的平面你可以理解为我们的显示器,这样一个立体的概念是不是就在脑子里开始有了呢?

image

如果还没概念,我们以旋转为例来继续说明

rotateX就像单杠

image

rotateY就像钢管舞

image

rotateZ就像旋转的风扇

image

四、如何理解prespective

终于说到本文的核心了,prespective属性有两个作用,一是开关,通过它来打开和关闭3D透视效果,二是设置透视的距离。

设置 prespective:none; 是关闭透视效果,设置 prespective:50; 是打开透视效果并设置透视的距离是50像素,你可以理解为在显示器前50像素的距离看到的透视效果,而对于什么是透视效果,可以看这张图:

image

人眼对物体的视觉效果呈现的是近大远小的特点,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