CSS变换被覆盖

Question

我面临以下问题：

我有两个函数，在不知道彼此的情况下，在不同的时间调用它们，它们都使用jquery对元素（应用css变换）进行操作。

但是它们都覆盖了彼此的内容。

例如，可以在这里找到一个例子。当您单击旋转链接时，将覆盖平移动画，并仅应用旋转动画。但是我希望保留两个变换。

我认为这不是jquery的bug，但我该如何使它们不相互覆盖？

box.css({
'-ms-transform': 'translate(50px,100px)', /* IE 9 */
'-webkit-transform': 'translate(50px,100px)', /* Safari */
'transform': 'translate(50px,100px)'
});

rotateIt.on('click', function() {
 box.css({
  '-ms-transform': 'rotate(45deg)', /* IE 9 */
  '-webkit-transform': 'rotate(45deg)', /* Safari */
  'transform': 'rotate(45deg)'
 });
});

- RVandersteen

---

你必须将这两个变换结合起来。这不是CSS或jQuery的错误。也就是说，当点击时，你必须像这样设置它：'transform': 'translate(50px,100px) rotate(45deg)'。 - Harry

我明白这是我应该怎么做的，我的问题是我有两个独立的函数应用这些样式。而且它们之间没有联系。在这种情况下是否有解决办法？ - RVandersteen

检查一下 这个链接 是否有帮助。我认为没有其他替代方法，只能获取当前的变换值并将新的变换添加到其中。或者，您可以参考 这个链接。 - Harry

@RVandersteen 你是说你不能改变这些函数吗？如果是这样，那就没有解决办法了。放弃吧。 - Mr Lister

我想把它们分开，因为它们对不同的事件做出反应。我想我必须将当前的转换（字符串）保存在一个变量中，并在重新应用之前附加它。 - RVandersteen

Answer 1

如果这两个类是相同的元素，那么显然你正在用其他东西覆盖 transform 属性。

要同时使用 transform 的 rotate 和 translate，可以这样做：

 yourSelector{ transform: rotate(45deg) translate(50px,100px); }

在你的情况下，尝试这样做：

rotateIt.on('click', function() {
 box.css({
  '-ms-transform': 'rotate(45deg)', /* IE 9 */
  '-webkit-transform': 'rotate(45deg)', /* Safari */
  'transform': 'translate(50px,100px) rotate(45deg)'
 });
});

- Suman KC

---

是的，但我想知道如果你在编写程序时不知道下一个 transform 是什么会发生什么。 - Quentin Engles