CSS3变换旋转而不覆盖变换翻译[重复]答案

【问题标题】：CSS3 transform rotate without overriding transform translate [duplicate]CSS3变换旋转而不覆盖变换翻译[重复]
【发布时间】：2015-06-09 08:41:01
【问题描述】：

假设我有一个元素已经应用了翻译：

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

谢谢大家。

【问题讨论】：

【解决方案1】：

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

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

在您的场景中，一种解决方法可能是创建一个仅用于旋转的包装 div（here's a complicated example 使用开发工具查看它），

【讨论】：