[CSS] 3D變形效果

perspective(透視)

將元素轉變為立體3D狀態，必須先用perspective(透視)屬性建立3D空間。請把此perspective屬性想成是觀看者與所看物件之間的距離。為perspective屬性指定較小的像素值，所產生的視覺震撼力會較大，因為這等於是觀看者較貼近螢幕上的元素。

#main{
  -webkit-perspective：1000px
}

此宣告不會在網頁上製造出任何視覺效果，它只會告訴瀏覽器要將該區域轉變為3D狀態。

 

perspective-origin(透視基準點)

perspective-origin決定了觀看者的位置。初始值為50% 50%代表觀看者會直視3D元素。其X和Y座標都會在中間。同樣地，perspective-origin屬性也只是用來替元素設定3D空間的，它不會產生任何視覺效果。

#main{
  -webkit-perspective-origin：50% 50%;
}

 

transform的translateZ()及translate3d()函式

例：(該元素會沿著Z軸往後退500像素，即該元素會顯得遠離觀看者。)

#main{
  -webkit-transform: translateZ(-500px);
}

另外translate3d()只是translateX()、translateY()、translateZ()三個函式的縮寫版。可一次指定三個參數，分別代表X軸、Y軸、Z軸。

 

旋轉：transform的rotateX()、rotateY()、rotateZ()

例：(指定rotateX()、rotateY()、rotateZ()可別分對X軸、Y軸、Z軸旋轉。)

.sidebar{
  -webkit-transform: rotateX(10deg);
}

若是需指定多個旋轉軸心，那可考慮使用較簡便的rotate3d()函式，並依序指定X、Y、Z軸參數值。

 

縮放：scaleZ()與scale3d()

例：

.sidebar:hover{
  -webkit-transform: scaleZ(2) translateZ(100px);
}

若需要同時沿3個軸向縮放元素，那與其分別指定3種函式scaleX()、scaleY()、scaleZ()，還不如直接用scale3d()函式，並依序指定X、Y、Z軸3個參數值。

 

transform-style

當元素被賦予了perspective宣告後，只有其直接子元素能在3D空間中被操縱、變形。transform-style的預設值為flat(扁平)的元素，若要將3D空間傳給子元素，則應該宣告preserve-3d：

.sidebar{
  -webkit-transform-style: preserve-3d;
}

 

backface-visibility：背面能見度

例如：這樣能從背面觀看側邊欄

.sidebar{
  -webkit-transform: rotateY(180deg);
]

但想希望使用者從背後觀看該元素時，該元素不顯示其內容，則：

.sidebar{
  -webkit-transform: rotateY(180deg);
  -webkit-backface-visibility: hidden;
]