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)。