我想为不会覆盖自己的单个变换值创建css钩子，所以这个：
$(selector).css('rotateY',-20);
$(selector).css('rotateX',80);
会成为这个（应用正确的前缀）：
-webkit-transform: rotateY(-20deg) rotateY(80deg);
我发现了变换csshooks，但它们并没有完全符合我的要求： https://github.com/louisremi/jquery.transform.js 虽然这些css钩子似乎做了一个很好的交叉浏览器工作（甚至IE），但它们不允许单独的转换而不必编写整个转换（使用旧值）。
答案 0 :(得分：0)
你走在正确的轨道上......使用cssHooks是扩展/覆盖jQuery应该如何处理获取和设置css属性的常用方法。
这是一个非常非常简单的例子，说明如何做到这一点：
function createTransformHook(transformFunction, unitless) {
var transformProperty = 'transform', transformList
$.cssHooks[transformFunction] = {
get: function(elem) {
return ($.data(elem, transformProperty) || {})[transformFunction]
},
set: function(elem, value) {
transformList = $.data(elem, transformProperty) || {}
transformList[transformFunction] = value
$.data(elem, transformProperty, transformList)
$.style(elem, transformProperty, $.map(transformList, function(value, key) {
return key + '(' + value + ')'
}).join(' '))
}
}
$.fx.step[transformFunction] = function(fx) {
$.cssHooks[transformFunction].set(fx.elem, fx.now + fx.unit)
}
if (unitless) {
$.cssNumber[transformFunction] = true
}
}
此函数使用transform-function和可选的第二个参数，将其声明为无单位属性（不自动添加'px'）。它还将该属性添加到全局jQuery.fx.step对象，这样就可以使用jQuerys默认的animate函数为该值设置动画。
您可以按如下方式使用它：
createTransformHook('translateX')
createTransformHook('translateY')
createTransformHook('rotateX', true)
createTransformHook('rotateY', true)
createTransformHook('rotate', true)
createTransformHook('scaleX', true)
createTransformHook('scaleY', true)
createTransformHook('scale', true)
// etc...
...然后像任何其他css属性一样编写变换：
$(selector).css({
translateX: '-50%',
translateY: '-50%',
rotate: '45deg'
})
如上所述，它非常简单和天真，只是一个例子...
$.cssHooks[transformFunction] 直接挂钩到jQuery中以覆盖特定CSS属性的检索或设置方式，规范化CSS属性命名或创建自定义属性。
$.fx.step[transformFunction] css钩子也可以通过向jQuery.fx.step对象添加属性来挂钩jQuery的动画机制
$.cssNumber[transformFunction] 包含可在没有单位的情况下使用的所有CSS属性的对象。 .css（）方法使用此对象来查看它是否可以将px附加到无单位值