Javascript + CSS：从绝对定位元素转换为 CSS 变换（左、上、宽、高到 translateX、translateY、缩放）答案

【问题标题】：Javascript + CSS: Converting from absolute positioned elements to CSS Transforms (left, top, width, height to translateX, translateY, scale)Javascript + CSS：从绝对定位元素转换为 CSS 变换（左、上、宽、高到 translateX、translateY、缩放）
【发布时间】：2012-04-07 23:48:22
【问题描述】：

我想将 Javascript 轮播转换为在 iOS 设备 iPad 和 iPhone 以及使用能够利用 CSS 转换的硬件加速的 webkit 的 Android 设备上顺利运行。

是否已经有允许位置和大小设置的库或一些 sn-ps 代码？

我发现 jquery.animate-enhanced 可能很接近，但它需要动画，并且还进行特征检测 - 我想做一些更简单的事情，它看起来比这要复杂得多。

我怀疑解决方案需要解决几个复杂问题：

- 简单重用代码以使用 top / left CSS 属性或带有翻译的 CSS 转换（以及转换它们所需的任何重新计算）

-使用缩放变换而不是设置宽度和高度

设置步骤如下：

-将-webkit-transform-style设置为preserve-3d

-如果需要设置-webkit-transform-origin（以及如何设置？）

【问题讨论】：

标签： webkit javascript zepto css-transforms

【解决方案1】：

我在标签中看到了 Zepto，所以您似乎已经考虑过它但它没有工作？ Zepto 的动画确实使用 CSS3。

我会尝试这样的事情作为第一个猜测。您需要在“animateLeft”方法之外进行特征检测，因为 jquery 和 zepto 的动画 api 不同。

可能是这样的（伪代码）：

isTouchy = Modernizr.touch

var slideRight = function() {
    if (isTouchy) {
        Zepto('#carosel').animate(...)
    } else {
        jQuery('#carosel').slideRight() //sorry, don't know the api
    }
}

http://zeptojs.com/#animate

http://modernizr.com/

【讨论】：

我实际上并没有使用 jQuery，只使用了 Zepto，但它们是表兄弟，因此是标签。 zepto 的动画是否从绝对定位元素转换为 CSS 变换？我认为我的主要障碍是弄清楚 X 和 Y 平移需要乘以比例变换，让我走了很多路，有点打脸，哦，是的，这就是为什么它们不工作的原因。也许我现在应该自己回答这个问题。我希望某些东西已经存在——也许动画功能比我想象的更聪明。不管怎样，谢谢你的想法。
我实际上没有使用过 Zepto 的动画。我通常通过构建 css 类并使用 JS 交换类来手动完成它们。也许这是错误的方法，或者太冗长，但至少我可以相信正在发生的事情。