JS中无法为CSS transform属性设置多个值的问题求助

你遇到的是CSS的正常解析规则——当同一个属性在样式中重复声明时，后面的声明会直接覆盖前面的，所以你写的rotate(90deg)会被translate(-50%, -50%)覆盖，最终只有后者生效。

解决方法很直接，把多个transform变换合并到同一个属性声明里即可，transform本身支持多个变换函数，用空格分隔：

// 合并多个transform值到同一个声明
map.style.cssText = "transform: rotate(90deg) translate(-50%, -50%);";

或者直接操作style对象的transform属性，写法更简洁：

map.style.transform = "rotate(90deg) translate(-50%, -50%)";

注意：transform的函数顺序会影响最终视觉效果，浏览器是按从右到左的顺序依次应用变换的，比如先translate再rotate和先rotate再translate的结果完全不同，调整顺序时要留意。

如果之后需要在已有transform的基础上追加新的变换，可以用+=来拼接（记得加空格分隔）：

// 假设之前已经设置过transform，现在追加旋转效果
map.style.transform += " rotate(90deg)";

内容的提问来源于stack exchange，提问作者Monke