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