"prepend" a CSS transform

Question

Considering this element:

<div style="transform:rotate(9deg) scale(3) translate(20px,10%) skew(-11deg)"></div>

I'd like to add another transformation translate(5px) but before all others (ie: "prepend"):

<div style="transform: rotate(9deg) scale(3) translate(20px,10%) skew(-11deg)"></div>
                      ^
                 translate(5px)

How can I script this with javascript/jQuery?

Answer 1

Yes, even though the style is originally declared by individual transforms, when you retrieve the transform thru javascript, you get a matrix.

No problem, just set the transform with the matrix

<div style="transform: translateX(5px) matrix(values get from javascript)">