CODEWITHSUNDEEP
javascriptcss3dtransform
maioman
maioman

Reputation: 18754

not overriding css transform style using js?

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)

Upvotes: 0

Views: 217

Answers (1)

rofrischmann
rofrischmann

Reputation: 349

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.

Upvotes: 1

Related Questions