Javascript+CSS:从绝对定位的元素转换为CSS转换(左、上、宽、高到translateX、translate

Question

我想转换Javascript旋转木马，以便在iOS设备iPad和iPhone以及使用webkit的Android设备上顺利工作，该设备能够利用CSS转换的硬件加速。

是否已经有一个库或一些代码片段可以设置位置和大小？

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

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

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

-使用比例变换而不是设置宽度和高度

设置步骤如：

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

-如果需要设置-webkit-transform-origin（以及要做什么？）

Answer 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/