Transform除了旋轉(zhuǎn)、偏移、縮放、傾斜這些transform-function外，本篇介紹另外剩余的邊角料：基準(zhǔn)點(diǎn)、透視、滅點(diǎn)等。

目錄

基準(zhǔn)點(diǎn)：transform-origin
透視屬性：perspective
滅點(diǎn)位置：perspective-origin
呈現(xiàn)方式：transform-style
3D背面與否可見：backface-visibility

基準(zhǔn)點(diǎn)：transform-origin

使用Transform方法進(jìn)行文字或圖像的變形時(shí)，是以元素的中心點(diǎn)為基準(zhǔn)點(diǎn)進(jìn)行變形。使用transform-origin屬性，可以改變變形的基準(zhǔn)點(diǎn)。

（1）語法

transform-origin: x-axis y-axis z-axis;

共三個(gè)參數(shù)，表示相對(duì)左上角原點(diǎn)的距離，單位px，第一個(gè)參數(shù)表示相對(duì)左上角原點(diǎn)水平方向的距離，第二個(gè)參數(shù)表示相對(duì)左上角原點(diǎn)垂直方向的距離，第三個(gè)參數(shù)表示相對(duì)于Z 軸的距離。

前兩個(gè)參數(shù)除了可以設(shè)置為具體的像素值，其中第一個(gè)參數(shù)可以指定為left、center、right，第二個(gè)參數(shù)可以指定為top、center、bottom。第三個(gè)參數(shù)只能設(shè)置具體的像素值。

寫法實(shí)例：

div{transform: rotate(45deg);
transform-origin:20% 40%;
 
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin:20% 40%; /* IE 9 
 
-webkit-transform: rotate(45deg); /*Safari 和 Chrome */
-webkit-transform-origin:20% 40%; /* Safari 和 Chrome */
 
-moz-transform: rotate(45deg); /* Firefox */
-moz-transform-origin:20% 40%; /* Firefox */
 
-o-transform: rotate(45deg); /* Opera */
-o-transform-origin:20% 40%; /* Opera */}

當(dāng)填一個(gè)值時(shí)，默認(rèn)Y軸的值為50%，Z軸的值可以忽略不寫。

透視屬性：perspective

transform的值包含了一系列變換函數(shù)（transform function）,其中一部分變換函數(shù)會(huì)產(chǎn)生三維變換，但只應(yīng)用transform function是不能得到可用的三維變換效果的，還需要理解并使用其他和三維變換有關(guān)的CSS屬性。

正確的三維效果，是建立在一定的透視變化基礎(chǔ)上的。所謂透視變化，就是指以人眼看實(shí)際的景物時(shí)會(huì)有的“近大遠(yuǎn)小”的效果。此外，還有一個(gè)概念是滅點(diǎn)（vanishing point）。

當(dāng)景物離自己的位置越遠(yuǎn)時(shí)，就會(huì)越趨于集中到某一個(gè)點(diǎn)上。這個(gè)點(diǎn)就是滅點(diǎn)，它對(duì)于建立三維效果是非常關(guān)鍵的。

現(xiàn)在再來考慮網(wǎng)頁中的三維效果。請(qǐng)不要認(rèn)為網(wǎng)頁真的可以把元素排列在離屏幕前的你不同距離的位置(￣Д￣lll)。網(wǎng)頁仍然只會(huì)顯示在你眼前的屏幕上，其中的元素仍然位于同一平面。但是，元素會(huì)依照自己在虛擬三維空間中的位置，調(diào)整自己的位置和尺寸，從而創(chuàng)造出正確的三維效果。這個(gè)從虛擬三維空間轉(zhuǎn)換到平面中的顯示過程，也常稱為投影。

perspective就是控制這個(gè)投影的參數(shù)。它表示的是假想的觀察點(diǎn)到元素的繪制平面（也就是顯示網(wǎng)頁的平面）的距離，瀏覽器會(huì)根據(jù)這個(gè)距離值，以及元素的Z軸坐標(biāo)，計(jì)算出用于投影縮放的比例。

下圖中的d對(duì)應(yīng)的就是perspective的值：

這就是透視變化的“近大遠(yuǎn)小”的效果原理。因此要產(chǎn)生三維效果，必須要指定perspective。這個(gè)參數(shù)有兩種指定方法。

（1）語法

.aya{perspective:2000px;}//寫法一
.aya{transform:webkit-perspective(2000px);}//寫法二

2000px數(shù)值，代表人眼到透視物體的距離，值越大，透視越不明顯，值越小，透視越明顯。perspective的值必須為正數(shù)（也就是說，不包括0）。

這兩種指定方法是很有區(qū)別的。當(dāng)perspective作為transform的一個(gè)變換函數(shù)使用時(shí)，也就是第二種寫法時(shí)，透視變化只作用于應(yīng)用了此變換的單一元素。而使用perspective屬性的寫法，也就是第一種寫法時(shí)，則一般用在需要三維變換的多個(gè)元素的父元素上(這點(diǎn)要注意)。

它會(huì)使對(duì)應(yīng)元素的子元素共享同一個(gè)透視變化（包括滅點(diǎn)位置）。也就是說，第一種的這個(gè)寫法的CSS要寫在父元素上，但是作用在子元素上。此外，當(dāng)使用perspective屬性時(shí)，還可以使用perspective-origin屬性修改透視變化中的滅點(diǎn)的位置（默認(rèn)是中心點(diǎn)）。

（2）實(shí)例

（3）瀏覽器支持
目前主流的瀏覽器都不支持 perspective 屬性。需要使用瀏覽器私有前綴。Chrome 和 Safari 支持替代的 -webkit-perspective 屬性。

滅點(diǎn)位置：perspective-origin

（1）語法

perspective-origin: x-axis y-axis;

（2）實(shí)例

其中當(dāng)為元素定義perspective-origin屬性時(shí)，其子元素會(huì)獲得透視效果，而不是元素本身。所以要為元素定義perspective-origin屬性時(shí)，要在其父元素上定義該屬性。該屬性必須與perspective屬性一同使用，perspective也要定義在父元素上，而且只影響 3D 轉(zhuǎn)換元素。另外，不管是perspective還是perspective-origin都要設(shè)置瀏覽器的私有前綴，比如-webkit-perspective；以及-webkit-perspective-origin。

（4）瀏覽器支持
目前主流瀏覽器都不支持 perspective-origin 屬性。Chrome 和 Safari 支持替代的 -webkit-perspecitve-origin 屬性。

呈現(xiàn)方式：transform-style

該屬性是3D空間一個(gè)重要屬性，指定嵌套元素如何在3D空間中呈現(xiàn)。他主要有兩個(gè)屬性值：flat和preserve-3d。

（1）語法

transform-style: flat|preserve-3d;

其中flat值為默認(rèn)值，表示所有子元素在2D平面呈現(xiàn)。preserve-3d表示所有子元素在3D空間中呈現(xiàn)。

也就是說，如果對(duì)一個(gè)元素設(shè)置了transform-style的值為flat，則該元素的所有子元素都將被平展到該元素的2D平面中進(jìn)行呈現(xiàn)。沿著X軸或Y軸方向旋轉(zhuǎn)，該元素將導(dǎo)致位于正或負(fù)Z軸位置的子元素顯示在該元素的平面上，而不是它的前面或者后面。

如果對(duì)一個(gè)元素設(shè)置了transform-style的值為preserve-3d，它表示不執(zhí)行平展操作，他的所有子元素位于3D空間中。transform-style屬性需要設(shè)置在父元素中，并且高于任何嵌套的變形元素。

（2）實(shí)例

3D背面與否可見：backface-visibility

（1）語法

backface-visibility:visible|hidden;

（2）實(shí)例

后記：這是原文地址《CSS3新特性(01)：Transform（下）》，歡迎來我個(gè)人博客逛逛！