我们可以单独应用CSS3转换值吗？

CSS3

transform

值是否可以单独应用

详情：

例如，在 我们有

translate（100px，100px）

，2秒后，需要旋转，因此应用了

transform:rotate（3deg）

，但它将擦除

translate

——这种方式类似于，当我们使用

background:yellow

时，它将擦除

背景图像

属性

那么，我们可以应用

旋转

个体，使

翻译

保持不变吗？如果我们将

translate（）

和

rotate（）

的字符串“串联”在一起，这会起作用，但这会导致字符串操作太多，因为如果我们需要另一个

translate（）

，我们会添加到该字符串中（然后它会变得越来越长，越来越凌乱），还是我们在该字符串中搜索并删除原始的

translate

，然后添加新的

translate

？也有点乱。也就是说，我们可以说，旋转一点，不管你从x和y转换了多少，就呆在那里，做旋转吗

---

另外，我想到了一种方法，但需要JavaScript，这是为了保留一个我们想要转换的属性对象，例如，

{translate:[100100]，rotate:30}

，以便我们动态创建字符串并应用于

transform

。要更改任何旋转量，我们首先更改该对象（如

obj.rotate=45

），然后调用函数获取用于

transform

的新字符串。如果要堆叠多个变换值，并且仍然具有足够的灵活性，可以切换一个值，为什么不使用多个包装器呢

这将确保更新旋转时平移值未被触及

HTML

---

我认为你不可能尝试这样的东西不，这是不可能的如果你关心的是

翻译

，那么就有非转换的替代方案，以定位、边距等形式提供。但是，对于大多数其他函数来说都不可能……无论如何，如果你使用JavaScript，问题是什么？添加和删除转换函数的工作量并不比添加和删除类大多少。我刚才想到的一种方法是在CSS中显式写出所有可能的转换组合。喜欢

<div class="translate-element">
    <div class="rotate-element spin">
    </div>
</div>

.translate-element {
    transform: translate(100px, 100px)
}

.rotate-element {
    transform: rotate(3deg);
}

.rotate-element.spin {
    transform: rotate(30deg);
}