jquery - CSS 转换被覆盖

Question

我面临以下问题:

我有两个函数，它们将 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

如果这两个类属于同一元素，那么显然您正在用其他属性覆盖转换属性。

要同时使用变换旋转和平移，您可以这样做

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