【问题标题】：Transform individual values without overwriting themselves在不覆盖自身的情况下转换个人价值
【发布时间】：2012-11-08 12:36:35
【问题描述】：

我想为不会覆盖自身的单个转换值创建 css 钩子，因此：

$(selector).css('rotateY',-20);
$(selector).css('rotateX',80);

会变成这样（应用正确的前缀）：

-webkit-transform: rotateY(-20deg) rotateY(80deg);

我找到了转换 csshook，但它们并没有完全按照我的意愿做： https://github.com/louisremi/jquery.transform.js 尽管这些 css 钩子似乎可以很好地跨浏览器工作（甚至是 IE），但它们不允许单独的转换而不必编写整个转换（使用旧值）。

【问题讨论】：

标签： jquery css transform

【解决方案1】：

您走在正确的轨道上...使用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'
})

https://fiddle.jshell.net/88w1b2qq/

如你所说，真的很简单幼稚，只是一个例子……

`$.cssHooks[transformFunction]`

直接挂钩到 jQuery 以覆盖特定 CSS 属性的检索或设置方式、规范 CSS 属性命名或创建自定义属性。

`$.fx.step[transformFunction]`

一个 css 钩子也可以通过向 jQuery.fx.step 对象添加一个属性来钩入 jQuery 的动画机制

`$.cssNumber[transformFunction]`

一个包含所有可以在没有单元的情况下使用的 CSS 属性的对象。 .css() 方法使用此对象来查看它是否可以将 px 附加到无单位值

深入研究

【讨论】：