Question

我遇到以下问题：

我有2个函数将css转换应用于元素（使用jquery），彼此不知道任何内容并在不同时间调用。

然而他们都互相覆盖。

可以找到一个例子here。单击旋转链接时，将覆盖翻译，并且仅应用旋转。但是我想保留两种变换。

我认为这不是一个jquery错误，但我怎么能让它工作，以便它们不会互相覆盖呢？

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

Answer 1

如果这两个类具有相同的元素，你显然会用其他属性覆盖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)'
 });
});

CSS转换被覆盖

1 个答案: