1

我有一个图像,我想点击动画旋转 90 度,当再次点击它时,我希望它动画旋转 -90 度。

对于使用 css3 变换的旋转 im:

-moz-transform:rotate(90deg); 
-webkit-transform:rotate(90deg); 
-ms-transform:rotate(90deg);

对于 jquery,我想设置一个变量来检查对象是否已旋转,然后采取相应措施。

我一直很难让它发挥作用。我已经组合了一个JsFiddle

这是我正在使用的代码:

var turn = true;
$("#button").click(function () {
    $("#shape").css('transform', function(index) {
      return index * 90;
    });
});
4

3 回答 3

10

添加一些转换和旋转类,然后切换该类:

CSS:

#shape  { width: 100px; 
          height: 200px; 
          background:#000;
          -moz-transition: all 1s ease;
          -webkit-transition: all 1s ease;
          -o-transition: all 1s ease;
           transition: all 1s ease;
         }

.rotate {-moz-transform: rotate(90deg);
         -webkit-transform:rotate(90deg); 
         -ms-transform:rotate(90deg);
         -o-transform:rotate(90deg);
         }

js:

$("#button").click(function() {
    $("#shape").toggleClass('rotate');
});​

小提琴

于 2012-08-05T16:17:07.427 回答
2

如果我理解正确,应该这样做。

于 2012-08-05T16:11:51.323 回答
0

我认为一般来说,如果您要使用过渡,您应该针对您想要影响的特定属性。我认为使用“全部”是不好的做法。

目标替代:css:

#shape  { 
    width: 100px; 
    height: 200px; 
    background:#000;
    -moz-transition: transform 1s ease;
    -webkit-transition: transform 1s ease;
    -o-transition: transform 1s ease;
    transition: transform 1s ease;
}

.rotate {
    -moz-transform: rotate(90deg);
    -webkit-transform:rotate(90deg); 
    -ms-transform:rotate(90deg);
    -o-transform:rotate(90deg);
    transform:rotate(90deg);
}

///jquery

$("#button").click(function() {
    $("#shape").toggleClass('rotate');
});​
于 2016-07-17T18:33:31.147 回答