IT兄弟连 HTML5教程 CSS3属性特效 3D变换2

3  perspective-origin景深基点

perspective-origin景深基点属性时3D变形中另一个重要属性，主要用来决定perspective属性的源点角度。它实际上设置了X轴和Y轴位置，在该位置观看者好像在观看该元素的子元素。

perspective-origin属性的使用语法如下：

perspective-origin: tx ty;

该属性的默认值为“50%  50%”，可以设置一个值，也可以设置两个长度值。其取值及描述如表3

表3 perspective-origin属性值及描述

同perspective一样，perspective-origin属性必须定义在父元素上。通常perspective-origin属性本身不做任何事情，它必须被定义在设置了perspective属性的元素上。换句话说，perspective-origin属性需要与perspective属性结合使用，以便将视点移至元素的中心以外位置。

同样，我们通过一个小案例来加深一下对perspective-origin的印象。代码如下：

在这里我们也设置了两个div，每个div里包含一张图片。每个div都建立3D空间，设置600px的景深。不同的是，我们改变了第二个div的景深基点为“left top”，第一张使用默认的景深基点为“50% 50%”。在浏览器中查看，运行效果如图2所示：

图2  perspective-origin景深基点

从上图，我们可以看出两张图的差别。设置景深基点相当于换了位置查看这个3D变化。

4  3D位移

在CSS3中3D位移主要包括两种函数translateZ()和translate3d()。translate3d()函数使一个元素在三维空间移动。这种变形的特点是，使用三维向量的坐标定义元素在每个方向移动了多少。其基本语法如下：

translate3d(tx,ty,tz)

其属性取值及说明如表4:

表4  translate3d(tx,ty,tz)属性值取值及说明

一起来看一个简单的实例，加深对translate3d()的理解，代码如下：

这里我们为第二张图片使用translate3d()方法，让它相对于之前的位置偏移，横向偏移10px，纵向偏移10px，Z轴位移偏量为-100px。在浏览器中查看，运行效果如图3所示：

图3  translate3d() 3D位移

从上图，我们可以看出两张图的差别。第二张图位移发生了改变，向右偏移了10px，向下偏移了10px，向后偏移了100px。

在CSS3中3D位移除了translate3d()函数之外还有translateZ()函数。translateZ()函数的功能是让元素在3D空间沿Z轴进行位移，其基本使用语法如下：

translateZ(t)

t指的是Z轴的向量位移长度。

使用translateZ()函数可以让元素在Z轴进行偏移，当其为负值时，元素在Z轴越移越远，导致元素变得较小。反之，当其值为正值是，元素在Z轴越来越近，导致元素变得较大。将上例CSS代码的translate3d()方法替换成translateZ()方法，代码如下：

这里我们为第二张图片使用translateZ()方法，Z轴位移偏量为-100px。在浏览器中查看，运行效果如图4所示：

图4  translate3d() 3D位移

translateZ()函数仅让元素在Z轴进行位移，在实际使用中等同于translate3d(0,0,tz)。