Zi 字媒體

此篇文章瀏覽量： 834 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; ] 若覺得文章有幫助，請多分享，讓其他同好也能吸收網站技能知識。 Tweet