无法降低或增加-webkit-transform的属性值

Question

鉴于此代码：

$('#slider').css('-webkit-transform', 'translate(-=950px)');

它什么都做不了。如果我手动将translate的值设置为例如-1000px，则执行上面的代码只会完全删除该属性，就像解析它时出错一样。

使用CSS转换实际上是否可以递增或递减属性值？

Answer 1

jQuery的+=和-= CSS相对数值仅在the beginning of the value有效。

当非前缀属性不可用时，jQuery 1.8+会自动检测供应商前缀，因此您不需要jQuery代码中的CSS供应商前缀¹。

似乎像CSSOM getComputedStyle API（由jQuery的.css() getter内部使用）总是为matrix属性返回transform，所以让我们使用它：

var $el = $('#slider');

var matrix = $.map(
    $el.css('transform') //get computed transform value, e.g.: matrix(1, 0, 0, 1, 1000, 0)
        .slice(7, -1)    //strip leading "matrix(" and trailing ")"
        .split(', '),    //split values into an array
    Number //map to numbers
);

//[4] is the translateX
matrix[4] -= 950;

$el.css('transform', 'matrix(' + matrix.join(', ') + ')');

Fiddle - 在Chrome 33，Firefox 28，IE 10中测试

注意：.css('transform')将在不支持CSS3的浏览器中返回undefined，您可以将此代码包装在功能测试中，以避免在涉及旧浏览器时抛出错误。

参考 - W3C Recommendation - Coordinate Systems, Transformations and Units：

  

  

• 翻译等同于矩阵

       

  

       

  或 [1 0 0 1 tx ty] ，其中 tx 和 ty 是在 X <中转换坐标的距离< 和 Y 分别。

  

---

幸运的是translate很容易操纵。其他transform例如rotate需要一些数学 - 请参阅CSS Tricks - Get Value of CSS Rotation through JavaScript。

---

¹除极少数例外情况外，filter属性为bugged in Chrome，无法通过jQuery自动检测。

Answer 2

No, it's not possible.

不要将CSS与jQuery助手混淆。

Answer 3

在JS中使用webkitTransform而不是-webkit-transform。

此外，您无法在translate的当前值中添加或减去，因为您无法使用JS / jQuery获取translate的值。在CSS中添加一个类并使用addClass / .removeClass，或者设置一个px的数字。