「CSS3 」3D效果 & 透視

隨着瀏覽器的不斷進步和更新，許多的新特性也嶄露頭角。
許許多多之前須要用 gif 圖片或者是 flash 實現的效果，如今使用 CSS 就能夠實現了。消耗部分計算能力，從而大大減小了流量的交換。

今天要介紹的是 CSS3 中的3D效果，以及很是新的透視功能。

3D變換效果

CSS3 的3D效果是使用 transform 屬性的 rotateX(Y, Z), translateX(Y, Z), scaleX(Y, Z)方法進行設置的。

一個元素若是進行3D變換，它在3D空間的初始位置是這樣的：

上圖使用了立方體來更好的說明位置，若是隻是單單一個元素的話，它的形狀是一個平面區域。

下面來分別介紹一下 transform 屬性的3D相關方法。因爲這些方法很是易於理解，因此我不贅述。

rotateX (Y, Z)

這個方法使得元素繞着X、Y或Z軸進行軸旋轉，須要注意的是，全部的旋轉都是以順時針方向爲正方向。

translateX (Y, Z)

translateX 和 translateY 和2D空間的平移是同樣的，重點說一下 translateZ。

因爲默認開啓的是平行投影，因此當你更改一個元素的Z值的時候，視覺上沒有任何變化。如何開啓透視投影？不急，先慢慢看，後面會介紹到。

scaleX (Y, Z)

在X、Y或Z軸上對圖像進行縮放，很少說。

---

CSS屬性: transform-style

！這是一個很是重要的屬性，值能夠是：

• flat(default)

• preserve-3d

這裏許許多多的文章都沒有說清楚，不才在這裏嘗試解釋一下。

設置了 preserve-3d 屬性的元素會生成一個3D的空間，將全部的子元素（不是後代元素）都囊括在這個3D空間內。
對於父元素的 transform 屬性，會應用到生成的3D空間中，對整個空間進行縮放，平移，旋轉。
最後將全部的元素平行投影到屏幕上（不是父元素）。

請本身看上面的一段文字，若是可以理解，那麼嘗試分析 flat：
子元素並無在父元素的3D空間內，它們獨立的，各自作本身的3D變換，而後按照前後次序（即translateZ無效）投影到父元素（不是屏幕）上。
因爲全部的子元素都投影到父元素上，那麼父元素的 transform 屬性在視覺效果上是對父元素這個平面區域進行的。

// DEMO：case1

經過這個DEMO咱們能夠看到 flat 和 preserve-3d 的區別，更加理解上面的文字。

transform: translateX(10px) rotateZ(90deg);

你覺得是先平移10px再相對於以Z軸爲旋轉軸旋轉90度嗎？
其實並非，tranform 的屬性是從右邊的方法依次應用到左邊的方法的。

/*
 * 中場休息: 先好好消化一下上面的內容吧！
 */

透視投影

透視投影模擬人眼的圖像觀察方式，這種方式可以對物體的遠近，方位進行判斷，從視覺上來講更加接近人類所熟悉的效果。

perspective: none | <length>;

transform: perspective(<length>) method(p) method(p) ...;

第一種方法： 將 perspective 屬性更改成 >0 的數值，即可以將這個空間設置爲透視投影，即全部子元素（僅僅是, 不包括自身）的投影到屏幕的方式變爲透視投影。

第二種方法： 將perspective(<length>)方法加入到元素的transform 屬性的第一個（即最後應用），即可以將這個元素（僅僅是這個元素）開啓透視投影。

注意，這個透視投影的像平面和Z=0平面是重合的，原理圖以下：

其中，焦點到z=0平面的距離是 perspective 的值。
從上圖咱們能夠看出，當 perspective 的值越小的時候，Z值對於視覺效果的影響更增強烈，越大的時候，Z值對於視覺的影響更加細微。通常來講，在500px到1000px的時候視覺上更加合理。

當元素的Z值使得元素在焦點以後，元素則不會被捕捉到。

// DEMO: case2(perspective: 500px;)

能夠本身思考一下，左圖中爲何上下兩個面會顯示。（畫出它的投影）

---

咱們還能夠調整焦點的位置（默認在中心）：

perspective-origin: x y;

其中x的值能夠是: 長度、百分比，left(至關於0)、center(至關於50%, 默認)、right(至關於100%);
其中y的值能夠是: 長度、百分比，top(至關於0)、center(至關於50%, 默認)、bottom(至關於100%)。

// DEMO: case3(perspective-origin: 0 0;)

DEMO

[重要提示]請不要忘記推薦和收藏 (╯‵□′)╯︵ ┴─┴

git clone https://github.com/JasonKid/fezone.git

搜索 3D效果 & 透視