问题标签 [translate3d]

我已经实现了这个片段：

CSS

HTML

查看此 Fiddle以获取实时示例。

如您所见，平移仅:hover影响x-和y-axis。.part

它不会在 z 方向平移。

谁知道我做错了什么？

First of all,I am doing a html5 webapp on iOS, especially iPad.when touchmove,the div should move with my finger together,I used to change the left value to make this effect,but it seems not smooth enough ,so I used translate3d to do it,it seems great! And then,I just found the strange flicker happend,there are white flicker or flash in there several time when finger move the div.by the way,after moved once,the flicker is dispear. So,I check a lots of functions which include:

-webkit-perspective: 1000;

-webkit-backface-visibility: hidden;

-webkit-transform: translate3d(0,0,0) rotate(0) scale(1);

But no one works except change the flicker color to grey=.= So,this is my question.(iOS 5.01)

这是一个奇怪的！

概述：
我正在创建一个网络应用程序，并且创建了一个类似于您在 Facebook 应用程序中找到的菜单。向右滑动它会显示，向左滑动它会隐藏。

我通过将touchstart事件绑定到页面正文来做到这一点，此时我记录了手指按下的起点并绑定了touchmove和touchend事件。触摸移动事件找到当前手指位置并通过设置translate3d(x,y,z)以匹配手指位置来移动包含页面内容的 div 。

它实际上真的很棒。

在touchend 上，我会计算手指是否移动到足以触发菜单显示或内容返回到其原始位置的程度。无论选择如何，我都会应用一个类，该类又将-webkit-transition: -webkit-transform 等应用于内容 div。然后，我再次使用translate3d(x,y,z)设置确定的结束位置，并设置一个变量来阻止任何进一步的敲击暂时停止工作。

这就是问题所在！

问题：
在这一点上，如果内容是简单的基本结构，即文章布局页面，那么过渡是快速和即时的。然而！如果内容很复杂，即一个大数据表，那么会有一个暂停，从 1 到 30 秒……非常令人沮丧。

当它最终起作用时，回调会解除与 body 的 touchmove 和 touchend 事件的绑定，并且停止点击的变量未设置，我们已准备好重新开始。

我正在 iPad 1 上进行测试。滑动速度与暂停时间之间似乎没有任何关联。内容移动的距离之间也没有任何距离。

最后，我认为这是关键！
有一个按钮可以自动执行相同的打开关闭操作（再次，如 facebook），它工作正常，如果你滑动它，它会暂停，然后你点击该按钮它会立即开始工作，尽管它在切换时方向错误在已设置为打开的变量上。几乎就像它清除了某种动画队列并自行整理...

一些代码：
javascript

您将在上面看到使用的设置转换插件。

CSS，很简单。还应用了其他样式，但它们纯粹是视觉上的东西：

很抱歉发了这么长的帖子，这一直困扰着我很多！如果我无法解决问题，我将不得不把它撕掉。

我希望有人以前见过这个，并且可以提供帮助。（或者可以在上面的代码中看到一个明显的错误！）

谢谢，

将要 ：）

我一直在网上搜索并花费大量时间来获得流畅的动画。

当您使用 translate3d 属性设置如下元素属性时，它会自动触发硬件 cpu 加速是否正确？

设置后是否必须为它的 3d 属性设置动画？或者您可以为任何 CSS 属性设置动画。

为了动画这个我有另一堂课

然后我使用 jQuery 为 div 元素设置动画。

我在这里做对了吗？我应该使用什么来制作动画以获得最佳性能？如果它是 translate3d 方式.. 那么我的代码中会多出很多行来支持其他浏览器，如 opera、chrome 等，对吗？

问候，

克里斯。

刚刚在运行 10.7.1 的 Mac 上将 Chrome 从 17 更新到 18.0.1025.142，它扼杀了我们网站的性能。我们一直在使用 translate3d 来在屏幕上移动大量项目。我正在使用 requestAnimationFrame 制作动画。在 17 中，我们获得了超过 50fps 的帧速率。现在幸运地获得了 15fps。这真的很糟糕。

默认情况下是否关闭了硬件加速？其他人注意到这样的问题吗？我注意到字体渲染已经得到改进，现在与 Safari （运行网站精美）相当，也许这种变化对一般渲染性能产生了影响？

恐怕由于保密协议，我无法分享链接。但任何帮助将不胜感激！

更新：

据我所知，它仍然是 GPU 加速的，但性能真的很差，其他人也报告了类似的事情。v19 的 Chromium 版本似乎回到了旧的性能质量。

启动 chrome --show-composited-layer-borders 时曾经有一个标志，它会在 gpu 加速元素周围放置红色边框。此选项现在似乎已添加到 chrome://flags/ 中，但它在图层周围绘制绿色边框，并且似乎不再区分 gpu 元素。有谁知道显示元素是否由 gpu 呈现的选项？

chrome://gpu/ 说一切都在硬件加速......

我想做以下事情：给定一个带有透视图的容器和一个带有 translateZ 值的内部元素，我想用 translateY “拉起”它，以便在视觉上触摸周围容器的顶部：http://jsfiddle .net/8R4ym/129/

有没有某种公式，给定容器的透视值、元素的宽度和高度以及它的 Z 平移，我可以得到那种“顶部”计算？我一直在玩它，但我似乎找不到它的一些规则，因为似乎这些都是变量。

谢谢你的帮助。

我想要将旋转动画应用于 div，它会不断重复，直到我希望它停止。

我向我的 div 添加了包含动画参数的类“旋转”，然后使用 el.removeClass('spinning') 从 div 中删除了类“旋转”

动画有效，一旦我在 Chrome 和 Safari 中删除类，动画就会停止。但是在我的 Android 测试设备（4.0.1）上，动画不会停止，并且会在删除动画类时不断重复。

这是“旋转”类的代码和我的动画的其余部分：

我正在使用动画元素-webkit-transform: translate3d(x,y,z)和立方贝泽计时功能与 iPhone 的触摸事件相结合，以制作自定义滚动方法类型的东西。

麻烦的是，如果元素（在本例中为页面 div）超过一定大小，动画会卡顿（元素停止半秒）。如果我有 320 像素的宽度和 1000 像素的高度，这一切都很好，但如果我将高度设为 2000 像素，我会遇到令人讨厌的口吃。请注意，它在开始时只会断断续续一次，几乎就像它正在加载一样，然后就很好了。

是否有任何已知的解决方法？

将元素 Y 轴平移 50% 会将其向下移动 50% 的自身高度，而不是我期望的父级高度的 50%。如何告诉翻译元素将其翻译百分比基于父元素？还是我不明白什么？

http://jsfiddle.net/4wqEm/2/

检测浏览器是否支持translate3d我们可以使用（WebKitCSSMatrix在 window && m11in new WebKitCSSMatrix()）

但是现在那个firefox支持translate3d怎么才能有正确的检测呢？

我们的想法是在不使用 Modernizr 的情况下找到解决方案。