我有一张图片,我想单击它以动画形式旋转 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;
});
});
最佳答案
添加一些过渡和旋转类,然后切换该类:
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');
});
关于javascript - 使用 css3/jquery 来回“切换”元素的旋转,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11817879/