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/