Question

我有一张图片，我希望点击旋转90度的动画，当再次点击它时我希望它为旋转设置动画-90度。

对于使用css3变换的旋转：

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

对于jquery，我想设置一个varable来检查对象是否已被旋转，然后采取相应的行动。

我一直在努力让它发挥作用。我已整理了JsFiddle。

这是我正在使用的代码：

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

Answer 1

添加一些过渡和旋转类，只需切换该类：

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

FIDDLE

Answer 2

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

Answer 3

我认为，一般情况下，如果您要使用转换功能，则应定位您想要影响的特定属性。我会考虑使用＆＃34; all＆＃34;做不好的事。

目标替代方案：的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');
});

使用css3 / jquery来“切换”来回旋转元素

3 个答案: