目錄[1]坐標軸 [2]透視 [3]變形函數 [4]透視函數 [5]變形原點 [6]背景可見 [7]變形風格前面的話

本文將詳細介紹關于transform變形3D的內容，但需以了解transform變形2D為基礎。3D變形涉及的屬性主要是transform-origin、transform、transform-style、perspective、perspective-origin、backface-visibility

坐標軸

在了解透視之前，首先要先了解坐標軸。3D變形與2D變形最大的不同就在于其參考的坐標軸不同。2D變形的坐標軸是平面的，只存在x軸和y軸，而3D變形的坐標軸則是x、y、z三條軸組成的立體空間，x軸正向、y軸正向、z軸正向分別朝向右、下和屏幕外

透視

透視是transform變形3D中最重要的內容。如果不設置透視，元素的3D變形效果將無法實現。

//下面以rotateX()旋轉函數為例，rotateX(45deg)表示元素以X軸方向為軸沿順時針旋轉45角度//左圖是無變形和透視樣式的原始效果，中圖是設置變形和透視樣式的效果，右圖是設置變形但未設置透視樣式的效果

由以上三個圖可說明，如果不設置透視，那么瀏覽器會將元素的3D變形操作投射垂直到2D視平面上，最終呈現出來的只是元素的寬高變化

要深入了解透視，需要了解觀察者、被透視元素和變形元素這幾個概念。

首先變形元素，顧名思義，就是進行transform3D變形的元素，主要進行transform、transform-origin、backface-visibility等屬性的設置。

觀察者是瀏覽器模擬出來的用來觀察被透視元素的一個沒有尺寸的點，觀察者發出視線，類似于一個點光源發出光線。

被透視元素也就是被觀察者觀察的元素，根據屬性設置的不同，它有可能是變形元素本身，也可能是它的父級或祖先其元素(后面會詳細介紹)，主要進行perspective、perspective-origin等屬性的設置

透視距離

透視距離perspective是指觀察者沿著平行于z軸的視線與屏幕之間的距離，簡稱視距

值: none | <length>

初始值: none

應用于: 非inline元素(包括block、inline-block、table、table-cell等)

繼承性: 無

[注意]透視perspective不可為0和負數，因為觀察者與屏幕距離為0時或者在屏幕背面時是不可以觀察到被透視元素的正面的

[注意]透視perspective不可取百分比，因為百分比需要相對的元素，但z軸并沒有可相對的元素尺寸

【1】一般地，物體離得越遠，顯得越小。反映在perspective屬性上，就是該屬性值越大，元素的3d效果越不明顯。(就像離一個人很近，甚至可以看到他的毛孔；如果離一個人很遠，可能只看到一個輪廓)

【2】設置透視perspective屬性的元素就是被透視元素。一般地，該屬性只能設置在變形元素的父級或祖先級。因為瀏覽器會為其子級的變形產生透視效果，但并不會為其自身產生透視效果

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表