translate3d中的Z

Question

有没有人能解释一下或者给我举一个使用translate3d (webkit转换)中的"z“的例子？我已经成功地使用translate3d(x,y,0)在mobile 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-透视图。800是一个很好的起始值。如果长方体消失，请减小它，它可能比视口大。

Surfin‘Safari博客有一篇来自3d变形最初发明的文章：

-webkit- plane用于提供深度的错觉；它根据物体从z=0平面的z偏移量确定物体如何改变大小。你可以把它想象成你从p远处看着页面。z=0平面上的对象以其正常大小显示。Z偏移量为p/2 (位于查看器和z=0平面的中间)的对象看起来会大一倍，而z偏移量为-p的对象看起来会大一半。因此，较大的值会产生较小的缩短效果，而较小的值会产生大量的缩短效果。介于500px和1000px之间的值为大多数内容提供了一个合理的外观结果。

更多信息请点击这里：http://www.webkit.org/blog/386/3d-transforms/

Answer 2

我做这个是为了向你展示webkit transform 3D是如何工作的：

我希望它能对你有所帮助。我猜您的body或parent标签中没有-webkit-perspective。