不使用 js 覆盖 css 转换样式？答案

【问题标题】：not overriding css transform style using js?不使用 js 覆盖 css 转换样式？
【发布时间】：2015-01-12 09:47:42
【问题描述】：

我有不同的元素，每个元素都有不同的变换属性，

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

我正在尝试向这些转换属性添加 translateZ（通过 javascript）。

正如预期的那样，添加这样一个值会自动覆盖预先存在的属性。

有没有简单的方法来完成这项工作？

（作为一种解决方法，我考虑过使用transform-origin，但如果可能的话，我宁愿避免这样做）

【问题讨论】：

您能否发布一个显示问题的最小代码示例？
总有办法，但是设置一个新的transform inline 会覆盖以前的transform，你需要设置一个包含旋转和翻译的变换，但是在javascript中获取旋转值也不容易，因为transform 返回一个矩阵。
我会尝试更改代码以集成 transform-origin

【解决方案1】：

只要你只尝试一次，你就可以像这样连接那些字符串

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

如果您尝试多次执行此操作，则需要检查并可能在您的样式字符串中替换是否已经有 translateZ 值。

【讨论】：