-1

I am trying to select the sub attributes of the CSS transform property with jQuery. So for instance if we have something like this:

Edited 

.test{
    transform-style: preserve-3d;
    width: 460px; height: 738px;
    transform: translate3d(0px, 0px, 480.89px)
    matrix3d(-0.959423, 0.0701992, -0.273093, 0, 0, -0.968514, -0.248959, 0, 0.281971, 0.238857, -0.929215, 0, 0, 0, 0, 1)
    translate3d(230px, 369px, 0px);

Please note that this is a dynamic value, it changes when the view changes So if I want to choose any attribute value from matrix3d, how do I reach it with jQuery? Thanks.

erezT
  • 186
  • 17

1 Answers1

2

You can retrieve the CSS property through jQuery then split the value by , and get the 4th item from the resulting index, like this:

var transform = $('.test').css('transform').split(',')[3];

Example fiddle

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
  • I'm getting 0 or 1, or -1, I think I don't have the numbers after the decimal. What would be the wrpping jquery func. for that? Will try with -webkit-transform. – erezT May 27 '16 at 20:12
  • I would need to see a full example of your code to help you diagnose that. It would help if you could edit your question to include it – Rory McCrossan May 27 '16 at 20:56
  • I've edited the question. – erezT May 27 '16 at 21:03
  • The code above still works for that scenario. You just need to amend the `[3]` to be the index of the value you want to retrieve – Rory McCrossan May 27 '16 at 21:26
  • i'm sorry, that is not correct, I have updated your jsfiddle and it doesn't work. https://jsfiddle.net/erezt/undn7cva/1/ – erezT May 28 '16 at 06:22
  • http://prntscr.com/b9d8ia – erezT May 28 '16 at 07:03
  • Again, that is correct and working completely as expected. In your example the 4th item (index 3) is has a value of `0` - hence the zero shown in the console. As I said in my answer you need to change the index you use to retrieve the other values: https://jsfiddle.net/undn7cva/2/ – Rory McCrossan May 28 '16 at 15:05
  • Rory, thanks for your help. But its not. – erezT May 28 '16 at 15:49
  • Can you give any meaningful feedback? I've given you 2 working examples now, and all you've told me is that 'it doesn't work'. What values do you see? What values are you expecting to see? – Rory McCrossan May 28 '16 at 15:54
  • Absolutely, it shows 0 in the console, when I use split 1 or 2 or any, I get 0, all values received from your answer doesn't bring the matrix3d values. when I do split [0] it gives me: "matrix3d(1" – erezT May 28 '16 at 16:02