1

谁能解释或指出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 上顺利运行的小型缩放脚本。

4

2 回答 2

3

我做这个是为了展示 webkit transform 3D 的工作原理：

http://jsbin.com/iderag

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

于 2011-09-21T23:16:47.120 回答
1

请记住在包含框上设置 -webkit-perspective。800 是一个很好的起始值。如果框消失，缩小它，它可能比视口大。

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

-webkit-perspective 用于产生深度错觉；它根据事物从 z=0 平面的 z 偏移量来确定事物如何改变大小。你可以把它想象成你正在从距离 p 看页面。z=0 平面上的对象以其正常大小显示。位于 p/2 的 z 偏移量（观察者和 z=0 平面之间的中间）的东西看起来会大一倍，而位于 -p 的 z 偏移量的东西看起来会大一半。因此，较大的值会产生少量的透视效果，而较小的值会产生大量的透视效果。500px 和 1000px 之间的值可以为大多数内容提供合理的结果。

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

于 2011-09-21T21:23:49.393 回答