Unable to get Translate3d values from inline style

Question

I've got an element that has, at some point of execution, a transform property (with translate3d ).

The thing is, when I look from the element inspector in Firefox, the property is there, even when I am looking into a .getComputedStyle() output but when I retrieve the inline style's value using JS or JQuery , the transform property is gone, it's place being replaced by some paddings and margins.

I understand it has been translated to those same paddings and margins, though, if I do set a transform/translate3d value in a CSS sheet, it does appear using JQuery's css() selector. Sadly, in this case I am retrieving a value automatically generated so I cannot set it manually in a CSS sheet.

I have not found anything on the internet and I have been searching for hours, have you ever seen this hapenning?

I need that value, even if it is in a matrix, but he is getting away with any approach I've tried ( .style , getComputedStyle() , css() etc etc.)

For example, getComputedStyle().getPropertyValue() will return none.

Thanks in advance.

Answer 1

Founded a solution.

Could make it by parsing a matrix that I was able to get via element.css('transform') .

After getting that matrix I just matched it with a regex and basically converted it to the typical translate3d(x-axis, y-axis, z-axis) syntax.

I was doing all of this during an event function, which greatly made this more difficult.

To change that value later, I had to preventDefault() the event, otherwise it would refuse to change.