原生JS实现DIV可变角度旋转与X轴翻转的transform语法问题求解

常见踩坑原因 #

• CSS的transform是单值属性，分两次独立给style.transform赋值的话，后一次的赋值会完全覆盖前一次的效果，不会自动叠加，这也是之前单独写scaleX(-1)会把已有旋转效果冲掉的核心原因
• 字符串拼接时引号边界错位，把本该参与运算的JS变量包在了固定字符串内部，导致变量值无法正确嵌入生成的样式值里，典型错误就是把拼接的变量段写在单引号字符串的包围范围内，最后生成的样式是无效值

正确实现代码 #

传统字符串拼接版本 #

const rot = 45; // 可动态修改的旋转角度变量
const divTag = document.querySelector('#目标div的选择器');
// 多值用半角空格隔开，变量正确嵌入拼接链路
divTag.style.transform = "scaleX(-1) rotate(" + rot + "deg)";

拼接逻辑说明：把完整的样式字符串拆成三段独立拼接的内容，没有把变量固定在字符串常量内部：

1. 开头固定文本："scaleX(-1) rotate("
2. 中间变量值：rot
3. 结尾固定文本："deg)"

低出错率的模板字符串版本 #

实际开发中更推荐用ES6模板字符串写法，完全规避引号错位的问题：

const rot = 45;
divTag.style.transform = `scaleX(-1) rotate(${rot}deg)`;

只需要把动态变量放在反引号包裹的字符串的${}占位符内即可，不需要手动切换引号、写加号拼接。

注意事项 #

• transform的多个函数值之间 仅用半角空格分隔即可，不需要额外加逗号分隔
• 不要在两行代码里分别写两次divTag.style.transform赋值，否则必然发生效果覆盖
• 写拼接逻辑时一定要明确引号的包围范围，不能把JS表达式/变量包在字符串引号内部，否则变量会被直接当成固定文本输出，生成的样式值无法被浏览器识别

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