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); }

当旋转未添加到现有翻译时会出现问题，而是覆盖并否定它。

如何保留原始翻译而不必像下面那样膨胀我的代码：

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

这是一个小提琴： https://jsfiddle.net/timothyzhu/vm84vsj7/

谢谢你们。

Answer 1

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

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

在您的方案中，解决方法可能是创建一个仅用于轮换的包装div（here's a complicated example使用dev-tools查看它），

fiddle