我想为不会覆盖自身的单个转换值创建 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），但它们不允许单独的转换而不必编写整个转换（使用旧值）。
你走在正确的轨道上......使用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对象，从而可以使用 jQuery 的默认动画函数对值进行动画处理。
您可以按如下方式使用它：
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 hook 也可以通过向 jQuery.fx.step 对象添加属性来挂钩到 jQuery 的动画机制
$.cssNumber[transformFunction]一个对象，包含可以在没有单元的情况下使用的所有 CSS 属性。.css() 方法使用此对象来查看它是否可以将 px 附加到无单位值