z in translate3d

任何人都可以解釋或指向一個例子，其中使用translate3d（webkit變換）中的「z」？我已經成功地使用translate3d(x,y,0)獲得硬件加速在移動Safari瀏覽器的二維動畫，但現在我想使用z參數規模，但它似乎沒有任何效果...z in translate3d

elem.style.WebkitTransform = 'translate3d(100px,0,0)'; // this works as expected 
elem.style.WebkitTransform = 'translate3d(0,0,100)'; // nothing happens 
elem.style.WebkitTransform = 'translate3d(0,0,100px)'; // nothing happens 
elem.style.WebkitTransform = 'scale(1.2, 1.2)'; // works but slow on ios

旁註：我試圖構建一個能夠在ios上順利運行的小型縮放腳本。

來源

2011-09-21 David

請記住在包含框中設置-webkit透視圖。 800是一個很好的初始值。如果該框消失，請減小它，它可能比視口大。

的Surfin的野生博客具有從當3D變換被髮明的製品：

-webkit-透視用於給出深度的錯覺;它根據從z = 0 平面的z偏移確定事物如何改變大小。你可以把它想象成你正在看的距離爲的頁面。 z = 0平面上的對象以其正常大小顯示。 z偏移量爲p/2（位於觀察者與z平面之間的中間位置）的東西看起來會大一倍，而z偏移量爲-p的東西看起來要大一半。因此，較大的數值會帶來一些縮短效果，而較小的數值會使許多縮短。 500px和1000px之間的值爲大多數內容提供了一個合理的結果。

來源

2011-09-21 21:23:49

這麼簡單。你能指出我如何計算的解釋，f.ex是我想調整我的元素125％？ – David

好問題。我會保持透視一致，並改變z變換，就像你以前一樣。你可以通過反覆試驗來做到這一點。我已經編輯了我的答案，包括更多。 –

謝謝，接受！ – David

我做了這個給你展示如何WebKit的變換3D作品：

http://jsbin.com/iderag

我希望它幫你。我猜你在body或父標籤中沒有-webkit-perspective。

來源

2011-09-21 23:16:47 Mohsen

-webkit-prepective - > -webkit-perspective ... – redochka

回答

相關問題