JQuery common CSS selector

Question

I have:

<div class="abc" style="transform : [stuff]"></div>
which displays in chrome as
<div class="abc" style="-webkit-transform : [stuff]"></div>

So I want to grab [stuff] from both of these with a single selector.

$(".abc").css('whatcomeshere?')

Is there something like regex I can use here? Any other method? I'd imagine there would be a straightforward method since dealing with such things would be commonplace in JQuery.

EDIT: CLARIFICATION

I am NOT looking for methods to retrieve the angle or an element from the transform matrix.

I'm simply looking for one selector which would retrieve both transform and -webkit-transform styles $(".abc").css('transform') doesn't work for both.

Answer 1

Edit as of your comment below saying this didn't work for you with your version of jQuery and Chrome.

You could always fall back to the style property on the element:

var abc = $(".abc")[0];
var transform = abc.style.transform || abc.style.webkitTransform;

Live Example

For me, with my version of Chrome on 64-bit Linux, abc.style.transform returns undefined (which makes sense, I only set the vendor-prefixed version) and abc.style.webkitTransform returns the style information. So the above would return the first that wasn't undefined.

---

$(".abc").css("transform") should return it to you, jQuery normalizes vendor prefixes.

Here's a live example using this div:

<div class="abc" style="-webkit-transform: translate(100px) rotate(20deg); -webkit-transform-origin: 60% 100%;">foo</div>

And this code:

jQuery(function($) {
  display("$('.abc').css('transform') = " + $(".abc").css("transform"));
  display("$('.abc').css('-webkit-transform') = " + $(".abc").css("-webkit-transform"));

  function display(msg) {
    var p = document.createElement('p');
    p.innerHTML = String(msg);
    document.body.appendChild(p);
  }
});

Which outputs (on Chrome):

$('.abc').css('transform') = matrix(0.9396926207859084, 0.3420201433256687, -0.3420201433256687, 0.9396926207859084, 100, 0)

$('.abc').css('-webkit-transform') = matrix(0.9396926207859084, 0.3420201433256687, -0.3420201433256687, 0.9396926207859084, 100, 0)

Note that I only have the prefixed version on the div, but css gives me the same information for both transform and -webkit-transform.