3d 中的 z

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-perspective。 800 是一个不错的起始值。如果盒子消失了，缩小它，它可能比视口大。

Surfin' Safari 博客有一篇 3d 变换首次发明时的文章：

-webkit-perspective 用于给出深度错觉；它
确定物体如何根据 z=0 的 z 偏移来改变大小
飞机。您可以将其想象为您正在从某个位置查看该页面
距离 p 。 z=0 平面上的物体以其正常大小显示。
z 偏移量为 p/2 的位置（观察者和 z=0 之间的中间位置）
平面）将看起来两倍大，并且 -p 的 az 偏移处的某些东西将
看起来只有一半大。因此，较大的值会产生一点透视效果
效果，并且小值会导致大量的透视。 500px 之间的值
对于大多数内容来说，1000px 给出了看起来合理的结果。

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

Answer 2

我制作这个是为了向您展示 webkit 3D 变换的工作原理：

http://jsbin.com/iderag

希望对您有帮助。我猜您的 body 或父标记中没有 -webkit-perspective 。