任何人都可以解释或指向一个使用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上运行顺畅的小缩放脚本。
答案 0 :(得分：3)
我为你做了这个，以展示webkit如何改变3D的工作原理：
我希望它可以帮到你。我猜你的-webkit-perspective或父标记中没有body。
答案 1 :(得分：1)
请记住在包含框中设置-webkit-perspective。 800是一个很好的起始值。如果框消失，减少它，它可能比视口大。
Surfin'Safari博客有一篇文章来自最初发明3D变换时的文章：
-webkit-perspective用于给出一种深度的幻觉;它 确定事物如何根据z = 0的z偏移量改变大小 平面。你可以把它想象成你正在看一个页面 距离p。 z = 0平面上的对象以正常大小显示。 z偏移量为p / 2的东西（观察者和z = 0之间的中间位置） 平面）看起来会大两倍，并且-p的z偏移量会出现问题 看起来一半大。因此，较大的值会略微缩短 效果，小值大量透视。值介于500px之间 和1000px为大多数内容提供了合理的结果。