CSS3变换旋转而不覆盖变换平移

Question

假设我已经对一个元素进行了翻译，请看以下内容：

假设我已经对一个元素进行了翻译：

<div class="elem"></div>

.elem { transform: translate(50%,0); }

现在我想使用一个额外的类来旋转相同的元素。因此，HTML 和 CSS 现在如下所示：

<div class="elem rotate"></div>

.elem { transform: translate(50%,0); }
.rotate { transform: rotateZ(20deg); }

问题出现在旋转没有被添加到原有的translate上，而是覆盖掉了并使其无效。

我该如何保留原有的translate，而不必像下面那样增加代码的复杂度：

.elem { transform: translate(50%,0); }
.rotate { transform: translate(50%,0) rotateZ(20deg); }

这里有一个代码片段： https://jsfiddle.net/timothyzhu/vm84vsj7/ 谢谢大家。

- Tim

---

从上面来看，很明显“膨胀”会更快。 - jbutler483

你为什么更喜欢使用HTML/类膨胀而不是CSS膨胀？这真的有区别吗？transform属性没有默认值，因此您必须详细说明要转换的内容，否则会覆盖声明。 - Jayx

这太糟糕了。我原本希望使用一系列执行各种翻译的类，并将它们与执行各种旋转的另一系列类结合起来。但由于覆盖效应，我想我必须进行一些技巧性的处理才能让它正常工作。 - Tim

Answer 1

在一个元素上设置transform属性将覆盖先前在同一元素上设置的任何其他transform属性。

在这种情况下，一种常见的模式是使用JS存储值，然后应用变换，考虑到先前的变换属性（也因为变换序列很重要！）。

在您的情况下，一种解决方法可能是创建一个仅用于旋转的包装div（这里有一个复杂的示例，请使用dev-tools查看），

fiddle

- maioman

---

你的解决方法可行。不过我希望能保持我的HTML代码整洁。 - Tim

据我所知，目前还没有一种简洁的方法。 - maioman

Fiddle 404错误了。 - Loveen Dyall