Question

我有img，当我点击它时我需要旋转90度。

<img src="img/right-arrow.png" alt="" class="show">

当我使用

时

.show {
transform: rotate(90deg); 
}

在Css文件中它可以工作。但是当我在jQuery中执行它时它不起作用。这是我在jQuery中的代码

$('.show').click(function(){
    $(this).css("-webkit-transform" : "rotate(90deg)");
}
);

Answer 1

这是因为您在函数中使用了:，而是使用逗号：

$(this).css("-webkit-transform", "rotate(90deg)");

Answer 2

点击此处 jsfiddle

如果你想在JQ中的css中使用:，你需要将整个代码放在{}

之间像这样：

$('.show').click(function(){
    $(this).css({"-webkit-transform" : "rotate(90deg)"});
}
);

如果您不想使用{}，请使用,代替:

$('.show').click(function(){
    $(this).css("-webkit-transform" , "rotate(90deg)");
}
);

Answer 3

试试这个

$('.show').click(function(){
  $(this).css({
    '-moz-transform':'rotate(90deg)',
    '-webkit-transform':'rotate(90deg)',
    '-o-transform':'rotate(90deg)',
    '-ms-transform':'rotate(90deg)',
    'transform':'rotate(90deg)'
  });
});

Answer 4

试试这个：

$('.show').click(function(){
    $(this).css({"-webkit-transform" : "rotate(90deg)"});
}
);

DEMO HERE

jQuery中的Css转换

4 个答案: