问题标签 [translate3d]

我在 chrome 24 上有一个奇怪的错误。比长描述更好，你可以看看这里

http://jsfiddle.net/xMfZw/3/

正如您在左侧看到的那样，我可以毫无问题地悬停，但在 le 右侧它闪烁，因为我不再悬停 div。

有什么建议吗？

它在 IE10、Firefox 上运行良好，但在 Opera 上不运行。

我不知道这是一个错误还是只需要称为渲染问题，但这很烦人。

如果您有一个 3d 平移对象，其中您有一个缩放对象，如果该缩放对象超过一定大小，它就会消失。这就是我的意思：http ://dabblet.com/gist/4563584 （将 a 悬停并等待它消失）

我用谷歌搜索并搜索了很多，但无济于事。

你可能会想：为什么？因为我正在制作一个 impress.js 幻灯片，它需要放大很多，但是当使用 3d 转换来硬件加速时，对象被缓存为图像以节省内存或其他东西，我明白了，但大的仍然可见当完全放大时，它变得模糊（因为它以小尺寸缓存），缩放和缩小解决了这个问题，但它消失了......

我还没有找到任何其他方法来解决没有比例尺的模糊文本问题，也欢迎任何帮助。

• 使用谷歌浏览器 24.0.1312.52
• Firefox 16.0.2 运行良好

我正在使用：

X 和 Y 属性工作得很好，但 Z (300px) 就不行了。这是jfiddle。我究竟做错了什么？我尝试了 Chrome 24 和 Canary 25 感谢您的支持...

我的问题是该函数translateZ停止代码并且不起作用。没有这一行：particals.translateZ(50);代码有效，但我想将 Z 轴上的分词翻译 50 这个代码。

我有一个元素，我用 translate3d 变换设置了动画。父元素具有overflow: hidden，但在 Firefox Mobile 19.0.2 上，动画期间动画元素在父元素之外可见。

动画top属性而不是translate3d工作，但它不是硬件加速并且不够平滑。

它适用于我测试过的所有其他移动和桌面浏览器。

我想这是一个 Firefox Mobile 错误，但有人有解决方法吗？

这是用于测试的 jsfiddle 链接：http: //jsfiddle.net/dioslaska/6h8qe/

最小的测试用例：

HTML：

CSS：

更新：看起来问题在 Firefox 27 中得到了解决。

我正在尝试使用 translate3d: JSFiddle通过 CSS3 转换为元素设置动画。

在桌面 Chrome 和 Safari 中很好，但在 Android 4.1.x（SGSII、Galaxy Nexus 等）上的默认浏览器中，这种方法不起作用 - 转换不会停止。另外，我注意到这种情况只是一个相对的 translate3d：使用 translate 和 position CSS props（例如“top”、“left”）它可以工作。

我有一个使用 CSS3 translate3d 从左到右动画的图像的 jsFiddle 示例，这里：http: //jsfiddle.net/Rhx2K/3/

我有一个 requestAnimationFrame 循环 60fps 并以亚像素间隔在每一帧上设置 JPG 图像的左侧位置。

我在示例中放置了两张图片。他们都在做同样的事情，只是顶部的移动得更快。注意它是如何产生这种阶梯效应的。图像本身在亚像素级别进行转换。注意图像是如何以恒定速率移动的——你可以看到树木似乎在滑行，但左右两侧都在抖动。经过实验，我意识到离像素越远抗锯齿效果越好。例如左边：1px，没有抗锯齿，但左边：1.2px，有一些，然后左边：1.5px还有更多。左边：1.7px 少，然后在 2px，没有。所以这里的摆动是由于每个子像素步骤的相对抗锯齿。如果它没有引起这种抖动，这将是有意义的。

在转换上使用 webkit 转换时也会发生这种情况。 http://jsfiddle.net/Rhx2K/5/

这是标准行为吗？这似乎是 webkit 本身的一个错误。

我的解决方法是仅按像素值设置动画，如下所示：http: //cmivfx.com/home

使用像素值（相对于子像素值），不会向图像添加抗锯齿，因此动画看起来非常流畅......我唯一的问题是全像素增量会导致图像移动得太快。我需要亚像素增量来减慢动画速度。

这些我都试过了......

这些都不是答案。如何让 translate3d 动画在亚像素增量上看起来不错？

我将如何将负 translate3d 值转换为正数？

例如：

我将如何将值转换为正数，以便我的输出是：

我在升级到最新版本的 bxSlider (v4.1) 时遇到了这个问题。新版本是响应式的，因此用于transform在幻灯片之间切换，而不是使用left属性的旧方式（在 v3.x 中使用）。

我在这里创建了一个演示：http: //jsfiddle.net/SXZjV/

在 Safari 5 中查看时，悬停在块上不会做任何事情。但是，当通过检查器禁用时-webkit-transform: translate3d(0px, 0px, 0px);，动画效果很好。

有没有办法让这两种变换和谐地工作？

非常感谢。

Ps 我还没有在 Safari 6 中测试这种行为，因为我目前正在运行 Snow Leopard。

此代码在此处实时运行：http: //domtree.breckyunits.com

稍微偏离的部分是缩放行为。当我放大一个点时，它会正确放大，但会转换到错误的点。我觉得我需要同时进行某种类型的转换/翻译，但我不太确定如何理解这些东西。我对线性代数和向量/矩阵的练习很少。

需要工作的部分代码是重绘函数：

您可以在https://github.com/breck7/domtree/blob/master/domtree.js查看所有代码

vis 在前面的代码中定义：