z在translate3d中

Question

任何人都可以解釋或指向一個使用translate3d （webkit轉換）中的“z”的例子嗎？ 我已成功使用translate3d(x,y,0)在移動Safari上獲得硬件加速2D動畫，但現在我正在嘗試使用z參數進行縮放，但它似乎沒有任何影響......

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上運行順暢的小縮放腳本。

Answer 1

我為您做了這個，以展示webkit如何改變3D的工作原理：

http://jsbin.com/iderag

我希望它對你有所幫助。 我猜你的body或父標簽中沒有-webkit-perspective 。

Answer 2

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

Surfin的Safari博客有一篇文章來自最初發明3D變換時的文章：

-webkit-perspective用於給出一種深度的幻覺; 它根據z = 0平面的z偏移確定事物的大小變化。 你可以把它想象成你從距離p遠的地方看頁面。 z = 0平面上的對象以正常大小顯示。 在p / 2的z偏移處（在觀察者和z = 0平面之間的中間）看起來將是兩倍大的東西，而在-p偏移的-p的東西看起來會大一半。 因此，較大的值會產生一些縮短效果，而較小的值會產生大量的縮短。 500px和1000px之間的值為大多數內容提供了合理的結果。

更多信息： http ： //www.webkit.org/blog/386/3d-transforms/