问题标签 [translate3d]

我正在构建一个网络应用程序，人们可以在其中滑动浏览部分。这些部分主要是列表视图。我目前的设置如下：

• 在 touchmove 上：设置一个新的 translate3d 值
• 在 touchend 上：计算部分的容器应该捕捉到的 translate3d 值，并通过 rAF 在那里设置动画。

然而，当我滑动时，我得到了“复合层”需要几十毫秒（大约 40-70 毫秒）的各种点。我已经避免了复杂的计算，例如 box-shadow，所以我想知道如何改进它？剩下的JS在处理中是OK的；该事件占用大约 3 毫秒，重新计算样式需要另外 3 毫秒，但这是“复合层”的大块。

我正在尝试在 z 轴上排列元素并想要订购它们。正如您在示例中看到的，第二部分看起来像是在第一个元素（粉红色背景）上方，但在 z 轴上的值较低（-2500px）。我错过了什么？

我正在使用 jQuery 通过使用切换类来垂直移动元素，同时沿 Y 轴旋转。我知道 jQuery 正在应用这些类，因为 translate3d() 正在垂直移动元素，而 rotateY() 正在旋转元素。但是，我有两个问题：

1. perspective-origin对透视没有影响。相反，该元素在状态之间奇怪地摆动。
2. 除非在最终状态中定义并从初始状态中排除，否则perspective()无效...... ??

这是我正在使用的 CSS：

初始状态：

最终状态：

希望这是足够的信息来发现问题。我基本上无法控制动画的视角。

我最初是在更改 margin-top 值，但想开始使用 3d 变换以获得更好的动画性能。

我正在使用 Chrome 桌面，我会不断更新。

更新：我创建了一个基本上显示问题的 JSFiddle。我知道我有很多前缀，主要是因为我不知道哪些前缀是必要的。希望这至少能传达这个想法：Perspective 没有做任何事情。JSFiddle：https ://jsfiddle.net/56aq22dc/

我正在实现页面的滚动劫持，并且喜欢使用事件处理程序 ontransitionend 来跟踪 CSS3 转换 translate3d 的结束。

但是，我有时会“丢失”事件处理程序并且它不会触发 ontransitionend。

有谁知道会发生什么？

我不想使用 jQuery 动画，因为它们运行缓慢，并且 set-timeout 会导致滞后/闪烁。不确定实现此效果的其他好方法。

我正在使用 Owlcarousel 2 在多个 div 上滑动，问题是在每个“滑动页面”内部都有一些元素定位为绝对（相对不工作），并且它们在动画时不可见，它们只是“blick- in" 动画结束时。

这就是我的 html 的样子

这是我的 JS 文件

我该怎么做才能使所有元素即使在滑入时也可见（当它们滑出时它可以工作）。它正在使用 Owlcarousel 1。

我在尝试定位使用 CSS 关键帧进行动画处理的背景图像时遇到问题。目前它是一个大的水平图像，从左向右滑动，然后再向左滑动。我希望它能让观众感觉好像他们正在观看全景或在房间里旋转。

我的问题是它在大屏幕尺寸下效果很好，但在诸如 1280x600 之类的东西上，你得到的只是天花板的视图。有没有一种方法可以定位它以在中心或底部加载背景图像，就像对传统背景图像所做的那样？

这是我的背景图像代码示例：

CodePen 链接

• 我有一个带有右侧菜单（绿色）的 CSS 布局。
• 菜单的主要部分默认隐藏在视口之外。
• 鼠标悬停在右侧菜单上：经过短暂延迟后，菜单完全转换到视口中（经过一点延迟）。
• 鼠标移出右侧菜单：菜单应转换回其初始位置（无延迟）。

请参阅此JsFiddle上的绿色菜单：尝试将绿色菜单悬停

这是相关的CSS代码：

重现：当动画处于其初始状态时，将鼠标移出绿色部分，这意味着在它达到其完全扩展之前。

• 有没有办法让流畅的动画总是发生？
• 我的 CSS 有问题吗？
• 这甚至可能吗？
• 如果是这样，是否有唯一的 CSS 解决方案，或者我必须采取不同的方式？

注意我在 ubuntu 上使用 Chrome v45。

对于学校项目，我正在按照本教程进行 Pong 游戏：http ://www.sitepoint.com/css3-pong-insane-things-to-do-with-css/

我被困在动画部分。球没有居中，当我将@keyframes 向上放置时，它会使球在球场上上下弹跳，而我希望它在球场内（墙壁）受到约束。

在这里看一张图片

如何让球留在禁区内？

这是我的 HTML：

CSS：

我不明白，这似乎是一个错误，但它在多个浏览器中是一致的。所以这个错误一定是在我自己的脑海中。

基本上，我有这个带有图像和一些文本的块。此块内的标题由几个 span 元素组成，每个元素都包含在其中。我想将它们淡入，不透明度为 0 到 1，并在悬停时将它们移动大约 30 像素，每个跨度都有轻微的延迟。这没有问题。但由于某种原因，似乎只有不透明度起作用，而不是 translate3d。

我有一个 jsfiddle 来描述它： https ://jsfiddle.net/w5Lgdgt9/5/

HTML：

CSS：

对可怕的 CSS 代码感到抱歉，我通常使用 SASS，但无法让它在 jsfiddle 上运行。另外，不要担心过渡内容的前缀，gulp 会为我处理这些，所以这不是问题。

我正在尝试为我的网站上的一些云设置动画，以便它们在页面上沿对角线移动（从左上角的屏幕开始，在右下角的屏幕结束）。

到目前为止，我让它们从左向右移动，但我不确定如何使用 translate3D 让它们朝这个方向移动。这是一个显示我想要实现的目标的网站：http: //futurewatercity.com/（您必须使用箭头点击他们的地图）

这是我的代码：