[英]'toggel' rotation of element back and forth using css3/jquery
我有一个图像,我想onclick为旋转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');
});
如果我的理解是正确的, 这应该这样做。
我认为通常来说,如果您要使用Transition,则应该定位要影响的特定属性。 我认为使用“全部”是不好的做法。
目标替代方案: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');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.