I'm having a problem with setting multiple values on the same css property in Javascript. The problem is that I can't make it so both of the properties get rendered but instead the last line gets executed.
//Map is a variable linked to an element
map.style.cssText = "transform: rotate(90deg); transform: translate(-50%, -50%);";
You should do it this way:
temp0.style.cssText = "transform: rotate(90deg) translate(-50%, -50%);"
That's because the cssText property works like inline style, and the last occurrence of a property overrides all previous ones.
Pls, Hover this div.
div {height: 100px; width:100px; background:yellow; border: 1px solid #000;}
div:hover {transform: translate(100px, 100px) rotate(45deg);}<div></div>Also, CSS uses the single-priority rule, which means - after page-rendering all your CSS is combined and converted to CSS Object Model. And, for each selector - the most prioratized CSS is set and others are overwritten, so for same selector and same CSS-Property: You will have 1 single resultant Value.
color:red; color: blue- the same applies totransform-"transform: rotate(90deg) translate(-50%, -50%);"would work - ormap.style.transform="rotate(90deg) translate(-50%, -50%)"transform: rotate(90deg); transform: translate(-50%, -50%);totransform: rotate(90deg) translate(-50%, -50%);should fix this :)