not overriding css transform style using js?

Question

I've got different elements each with a different transform property,

.one{transform: rotateY(10deg)}
.two{transform: rotateY(20deg)}
 //etc.

and I'm tryng to add a translateZ (through javascript) to these transform properties.

As expected adding such a value automatically overrides the pre-existing property .

Is there an easy way to get this done?

(as a workaround I thought about using transform-origin but I'd rather avoid that if it's possible)

There's always a way, but setting a new transform inline overrides the previous transform, you need to set one transform that contains both the rotate and the translate, but getting the rotate values in javascript isn't easy either, as transform returns a matrix. — adeneo
– adeneo, Commented Jan 12, 2015 at 9:51

rofrischmann · Accepted Answer · 2015-01-14 10:20:45Z

1

As long as you're trying to do it only once you could just concat those string like

newTransform = element.style.getPropertyValue("transform") + "translateZ(..px)"

If you're trying to do it multiple times you'd need to check and probably replace within your style-string if there's already a translateZ value.

answered Jan 14, 2015 at 10:20

rofrischmann

3492 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

I'm looking into storing the value - manipulate it - and style.transform it back to element