问题标签 [translate3d]

我想在右侧显示一个 div 与以下 CSS 完全相同，但使用 translate3d

我尝试了以下方法，但它只在 Chrome 中工作。

更新 请检查小提琴。http://jsfiddle.net/7LLbu/ 我需要使用 translate3d 的相同切换功能。

请帮我解决这个问题。

当以百分比移动对象时，CSS 具有标准行为，该百分比表示其父容器 (div) 的尺寸。

使用 CSS3 时，情况并非如此transform: translate3d()。如果对 X、Y 或 Z 坐标使用百分比值，则百分比表示当前对象的尺寸，而不是其父对象。

现在问题应该很明显了：如果我需要使用 CSS3 动画并将transform: translate3d()当前对象移动到其动态可调整大小的父对象的尺寸内，我根本不知道该怎么做。一个例子： usingtranslate3d(100%, 0, 0)将按照当前对象的物理宽度移动对象，而不是它的包含块。

任何想法如何获得父母的动态变化的尺寸，拜托？或者如何使用硬件加速使当前对象在其父对象内转换translate3d()？

Mozilla 开发者网络确认：Percentages(in transitions) 是指边界框的大小。

请问有什么解决办法吗？

我正在尝试使用 CSS translate 执行以下操作：

单击按钮时，气球会出现并飞走。当它们完成飞行时，它们会消失并返回到起始位置（这样下次单击按钮时会发生相同的行为）。

到目前为止，我得到了以下信息（气球只是飞起来，没有出现/消失）。

HTML

CSS

JS

问题是，当我尝试添加开始display : none对象并单击添加$('.object').show()时，我的动画根本没有开始。如何让我的气球飞起来？

因此，我一直在使用 Foundation 的这种画布外导航，并且已经取得了相当大的进展。我有一个菜单列表，里面有子菜单，都位于页面的左侧。这是我现在的代码：

现在，当您单击右侧的子菜单之一时。我想知道有没有办法让它从左边滑进去。我尝试将那个 li 的子 ul 上的类更改为“right-submenu”，但这似乎不起作用。任何人都知道可能有用的任何其他选项吗？

我使用的 CSS 文件是默认的foundation.css 文件。我也在使用 off-canvas.js 和 foundation.js 文件，但这些文件根本没有被操纵。我觉得问题出在 CSS 文件中。这是从右侧滑入时给出的类：

也许编辑这部分以使其从另一侧滑入是我需要做的？我尝试将值更改为 100%，但这只是将其一直推到左侧，并从主要内容下方的另一侧推开。有什么帮助吗？

我最初在我正在制作的 Cordova 应用程序中使用 jQuery 的滑动功能将页面滑出视图（以显示其下方的另一个页面），虽然这在我的桌面浏览器上运行良好，但它（现在可以理解）非常不稳定实际的移动设备。所以我找到了原因，并了解到我应该为移动设备使用 CSS3 动画/过渡，更具体地说，Translate3d 用于任何可能需要 GPU 渲染的东西。所以我做了这样的改变：

我只是根据需要切换“out”类。

过渡平稳运行，直到屏幕上留下大约 50 像素（或页面有大约 50 像素重新出现），然后在完成之前停止大约一秒钟。我想知道是否有人对为什么会出现这种情况有任何建议，或者是否有更有效的方法来做到这一点。

我使用的设备有一个带有 12 核高性能显卡的 nVIDIA Tegra 3 CPU。

我正在使用 stellar.js 和 iscroll-probe.js（iScroll 5 的一部分）在使用 Ionic（使用 Cordova）构建的 HTML5 应用程序中处理移动设备上的滚动。

我的问题是我告诉 stellarJs 使用转换滚动

现在，当页面位于顶部并且用户将其向下拖动时，我将 css 比例应用于元素，使其增长。

这会缩放它，但有闪烁。这是因为 Stellar.js 不断地用

（如果页面向下 5 px）

如果我控制台记录我的转换值，我会得到如下信息：

知道如何克服这个问题吗？我可以附加转换吗？

我试过了

但它没有帮助，它仍然会覆盖，它实际上使动画变得更糟。

任何帮助，将不胜感激

我正在使用 translate3d 为 gpu 加速转换实现一个轮播，我在轮播项目上得到了伪影（白色/灰色方格背景）。添加这个：

到轮播和移动 div 的 css 部分解决了问题，但方格背景仍然出现在溢出的轮播项目上。部分可见的，而不是完全在屏幕之外的，不会出现这个问题。但是当一个新项目进入屏幕时，它会在渲染之前以奇怪的背景出现。

关于如何解决这个问题的任何提示？

On my HTML page I have to render a shadowed and rotated polygon containing an image. If I assign the shadow to the DIV, I get a pixelated border and a blurry image.

If I add "transform:translateZ(0);" to the SVG, I get a good border, a good shadow and a blurry image.

At the end I found the best way is to assign an -webkit-svg-shadow to the SVG. This gives a good shadow, a good border and a net image. Cool.

The problem comes now. Somewhere on the HTML page, I add a shadowed and rotated rectangle containing an image.

The image within the rectangle looks blurry. The previous image within the SVG still looks ok. If I add the following code to the CSS file

the image within the rectangle looks good. BUT, the previous image within the SVG looks now blurry! I'm really puzzled. As I understand, transform:translateZ(0) turns the GPU acceleration on, and it re-blurs the SVG's image a second time. So, how can I get the 2 images look well? Or how to turn on/off the GPU acceleration? Should I use SVG rectangles all the time? I mean, should I use SVG for any shape? I come from Cocoa and OpenGL and I am new to HTML and CSS. At the first look it seems to be buggy and not so reliable. Is it true?

我们正在使用最少的 js 和 css translate 3d 属性构建一个平滑滚动库。我们有这方面的基础（作为附加的笔），但是随着我们增加图像和文本内容的数量，动画开始抖动，有时甚至在我们滚动时跳跃。我们不确定我们是否正在使用最佳方法来实现这一目标。请检查附带的笔。

链接到笔

谢谢 ：）

我正在尝试通过使用带有 1s 过渡的 translate3d(100%,0,0) 移动一个（100% 宽度）div 来在屏幕外设置动画。我相信动画应该完全卸载到 GPU 上并且不受 JS 的影响，但是当我进行 JS 计算时它会冻结。

请注意，当我使用像素值时它不会冻结，例如 translate3d(500px,0,0)

看到这个效果：http: //jsfiddle.net/khufzte9/

这是我正在使用的代码：

CSS：

HTML：

JS：

任何想法或建议将不胜感激！