Question

可以单独应用CSS3 transform值吗？

详细说明：

例如，在https://jsfiddle.net/eaqvyt1a/中我们有translate(100px, 100px)，2秒后需要轮换，因此transform: rotate(3deg)会被应用，但它会消灭translate - 这样，它类似于我们使用background: yellow然后它将清除background-image属性。

那么，我们可以应用rotate个人，以便保留translate吗？如果我们将translate()和rotate()的字符串“连接”在一起，那将会起作用，但是它会变得过多的字符串操作，因为，如果我们需要另一个translate()，那么呢？我们添加到该字符串（然后它变得更长，更长的字符串和杂乱），或者我们搜索该字符串并删除原始translate并添加新的translate？它也有点混乱。也就是说，我们可以说，旋转一点点，无论你从x和y翻译多少，只要留在那里并进行旋转？

P.S。然后，我想到了一种方法，但需要JavaScript，即保留我们想要转换的属性对象，例如{ translate: [100,100], rotate: 30}，以便我们动态创建字符串并应用于transform。要更改任何旋转量，我们首先更改该对象（如obj.rotate = 45），然后调用该函数以获取用于transform的新字符串。

Answer 1

如果要堆叠多个转换值并且仍然具有足够的灵活性，可以切换一个值，为什么不使用多个包装器？

这将确保在更新旋转时不改变转换值。

HTML

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

CSS

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

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

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

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

1 个答案: