[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;
]

您可在此處留言

avatar

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料

  Subscribe  
Notify of