我找到了一个部分符合我的需求的解决方案。当按下按钮时,我需要一个div旋转90度,下一次按下则再旋转90度等等。我还需要另一个按钮,以相同的方式将其旋转到相反的方向。我找到了一个JavaScript Fiddle并稍作修改,但问题是在按下按钮后,div会在每次旋转之前恢复到其原始位置。因此,无法将其旋转超过90度。如何解决这个问题?第二个问题是,如果我将broderSpacing从“-90”更改为“90”,为什么它只会旋转一次(点击后按钮仅起作用一次,然后不再有任何反应)?
HTML
<div id="foo">Text</div>
<button onclick="rotateFoo()">rotate</button>
CSS
#foo {
width:100px;
height:100px;
position:absolute;
top:100px;
left:100px;
border-spacing: 0;
background-color:red;
}
JS
function rotateFoo(){
$('#foo').animate({borderSpacing: -90}, {
step: function(now,fx)
{
$(this).css('-webkit-transform','rotate('+now+'deg)');
$(this).css('-moz-transform','rotate('+now+'deg)');
$(this).css('transform','rotate('+now+'deg)');
},
duration:'slow'
},'linear')
}
now
' 值从哪里来?你需要一种存储元素新位置的方法(多个元素的数组),以便 'now' 可以将其添加到当前位置(或在实现其他 button 时进行减法操作)。 - Kinnectus