3

Given this code:

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

It won't do anything. If I manually set the value of translate to for example -1000px, executing the above code just removes the property completely, as if there was an error parsing it.

Is incrementing or decrementing property value actually possible with CSS transforms?

8
  • Well in these three above nobody mentions the -= jQuery "helper" in the question so... doesn't really answers my question Apr 8, 2014 at 15:48
  • First line in the first linked duplicate: "As far as I know, basic animates can't animate non-numeric CSS properties." Apr 8, 2014 at 15:49
  • Doesn't matter if you're using -= or not, you can't .animate() the transform property, not without some hack (e.g. step function). Apr 8, 2014 at 15:50
  • I'm not using .animate(). I'm changing the css value directly and a -webkit-transition is taking care of the animation. Apr 8, 2014 at 16:46
  • Oh okay then, guess it is not a duplicate. Though relative incrementors won't work with non-numeric/non-px units afaik. You could always retrieve the current value, parse it and increment -- it is more ugly, but works. Apr 8, 2014 at 16:49

3 Answers 3

3

jQuery's += and -= CSS relative numeric values are only valid at the beginning of the value.

jQuery 1.8+ auto-detects vendor prefixes when the non-prefixed property is not available, so you don't need CSS vendor prefixes in the jQuery code¹.

Seems like CSSOM getComputedStyle API (used internally by jQuery's .css() getter) always returns a matrix for the transform property, so let's make use of it:

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 - Tested in Chrome 33, Firefox 28, IE 10

Note: .css('transform') will return undefined in browsers which don't support CSS3, you may wrap this code in a feature test to don't throw an error when older browsers are concerned.

Reference - W3C Recommendation - Coordinate Systems, Transformations and Units:

  • Translation is equivalent to the matrix

    Translation matrix

    Or [1 0 0 1 tx ty], where tx and ty are the distances to translate coordinates in X and Y, respectively.


Luckily translate is easy enough to manipulate. Other transforms such as rotate require some maths -- see CSS Tricks - Get Value of CSS Rotation through JavaScript.


¹ Save for a very few exceptions, the filter property is bugged in Chrome and fails jQuery's auto-detection.

1
  • Thanks for this comprehensive answer! Very clear now :) Apr 9, 2014 at 14:50
1

No, it's not possible.

Don't confuse CSS with jQuery helpers.

2
  • I know it's not possible in CSS, but jQuery does it perfectly with margin-left, for instance... I was just wondering if it did the same for more complex CSS values than mere pixel values Apr 8, 2014 at 15:42
  • My mistake, I didn't even know jQuery could do that outside animate.
    – MatTheCat
    Apr 9, 2014 at 8:34
0

Use webkitTransform in your JS instead of -webkit-transform.

Also, you can't add or subtract from the current value of translate, since you can't get the value of translate with JS/jQuery. Either add a class in CSS and use addClass/.removeClass, or set a single number of px.

2
  • Thank you, I'll just supply a static number to translate. Out of curiosity, what's the advantage of webkitTransform vs -webkit-transform in my Javascript? Apr 8, 2014 at 15:43
  • webkitTransform is the JS name for -webkit-transform. Similar rules apply to all CSS properties with a - in them. e.g., border-radius becomes borderRadius.
    – Mooseman
    Apr 8, 2014 at 15:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.