问题标签 [css-transforms]

我正在为移动设备开发一个 HTML5 Web 应用程序，但在流畅的动画方面遇到了一些麻烦。

本质上，当用户点击一个按钮时，一个抽屉（一个高度为 0px 的 div）应该动画到给定的高度（以像素为单位）并且内容将被附加到该抽屉。如果您有 Pinterest 帐户，您可以在http://m.pinterest.com上看到动画现在的样子（点击评论或回复按钮）。

不幸的问题是，在移动设备上，Webkit 过渡不是硬件加速的 height 属性，因此它非常滞后并且动画是锯齿状的。

以下是一些代码片段：

1. HTML : ...

   /li>

2. CSS：

   /li>

3. Javascript（使用 jQuery）：

   /li>

4. 截图：http: //imgur.com/nGcnS,btP3W

以下是我在使用 Webkit Transforms 时遇到的一些我不太明白的问题：

1. Webkit Transforms 缩放容器的子级，这对于我正在尝试做的事情是不可取的。-webkit-transform: none应用于孩子似乎不会重置此行为。
2. Webkit 变换不会移动同级元素。因此，.pin我们正在操作的容器之后的容器不会自动向下移动。这可以手动修复，但很麻烦。

非常感谢！

使用translateX或translateY时，Firefox 上的页面布局似乎受到影响。即使 CSS 规范声明这些属性不应影响布局，也会生成持久滚动条。

例如，访问http://daneden.me/animate并单击“fadeOutRightBig”动画。滚动条将在所有浏览器（支持 CSS 动画）上生成，但会在 Firefox 中持续存在。这是Mozilla或其他浏览器的错误吗？任何已知的解决方案？

请问有没有办法随着时间的推移结合更多的CSS3转换？例如当我设置这个

然后在几分钟内

我有问题。第一个转换被第二个转换覆盖，但这就是我绝对不希望发生的事情。所以我观察到我可以组合这些值，所以我可以暂时存储旧值并执行此操作

但即使那不正确，重复通话也有问题..

那么有没有办法通过javascript获得css3 scale的确切值？有没有办法通过 js 获得 CSS3 translate 的确切值？目前我只得到这些值的矩阵，当然我可以解析它，但我希望有更好的解决方案。

最后..我想 -webkit-transform: matrix(...) 在 iPad 上没有硬件加速，所以唯一的方法是 matrix3d？正确地结合所有这些转换没有问题..

非常感谢，希望你能理解我的问题：）

如何重置 CSStransform属性 CSStranslate值？

说我有：

那么如何清除所有转换/翻译？

我应该使用： translate(0, 0); /translate3d(0, 0, 0); 还是 transform:auto;？

我需要将 css3 transform:scale() 设置回它的原始值。

看这个例子：

http://jsfiddle.net/Z2TNw/

它在点击时有效，但当我将鼠标悬停时无效..

我也尝试设置为 scale(1) 但这也无济于事..

有任何想法吗？

我正在尝试将我的小大脑包裹在 3D CSS 变换周围，但我无法理解该scaleZ()函数的用途。

scale()，scaleX()并且scaleY()有意义：它们沿指定的轴拉伸元素，将沿该轴的尺寸乘以您提供的数字。

但scaleZ()似乎不同：

1. 它适用于元素的子元素
2. 它不会影响子元素的尺寸，因为 HTML 元素在 z 轴上没有任何尺寸（即您不能制作<div>“更厚”）。

WebKit 博客说：

[ scaleZ()] 影响变换子代中沿 z 轴的缩放。

我无法弄清楚这在实践中实际上意味着什么。谁能提供解释，最好是一些示例代码？

需要有关按钮上的 javascript 的帮助来触发这些转换，例如滑块 1、2、3 和来回交替。就像苹果网站上的 iPhone 功能滑块一样。任何人？

的HTML：

CSS：（2 和 3 相同）

我正在尝试设置博客帖子日期的样式，其中年份垂直对齐。出于某种原因，我知道这是我的错，它没有正确定位。试图让它冲洗干净。

CSS：

html:

看看http://jsfiddle.net/jalbertbowdenii/RmqQ6/4/

我正在使用一些 CSS3 2D 转换为 Android 特定网络应用程序的菜单设置动画。

我使用 Javascript 插入动画参数，因为它们仅在触发 ontouchstart 函数后应用。

下面以动画第一部分的 javascript 为例：

slide1这是动画的CSS3 ：

此代码正确显示动画，但是一旦动画的每个状态完成，它就会消失。根据我的阅读，这应该通过使用-webkit-animation-fill-mode:forwards或解决，-webkit-animation-iteration-count:1但这些似乎都不会在动画播放后停止/暂停动画。

有没有其他人遇到过类似的安卓问题？请帮忙。谢谢

出于某种原因，Chrome 在使用变换放大图像后不会重新消除锯齿，而 Safari 似乎会这样做。规范似乎认为 Safari 是正确的，所以我不确定除了为 Chrome 提交错误之外还能做什么。

有什么建议么？

示例图像