Question

我找到了一个部分符合我需求的解决方案。当按下按钮时我需要一个div旋转90度，然后再按90度等等。我需要另一个按钮，它会以相同的方向旋转它。我找到了一个JavaScript小提琴，并略微修改了它，但问题是在按钮按下div将在每次旋转之前恢复到其原始位置。所以它不可能旋转超过90度。我该如何解决？第二个问题是，如果我将broderSpacing从“-90”更改为“90”（按钮只能工作一次然后点击没有任何反应），它为什么只旋转一次？

JSFIddle

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')

}

Answer 1

我做了一个更简单的例子，请参阅https://jsfiddle.net/HwTMb/1517/

function rotateFoo(){
    var angle = ($('#foo').data('angle') + 90) || 90;
    $('#foo').css({'transform': 'rotate(' + angle + 'deg)'});
    $('#foo').data('angle', angle);
}

另外，我不确定你为什么需要边距。

Answer 2

你可以稍微改变一下，然后把它变成你想要的东西：

DEMO

    var rotate=0;
function rotateFoo(){
    $('#foo').animate({borderSpacing: -90}, {
    step: function(now,fx) 
    {
         rotate+=2.1;
      $(this).css('-webkit-transform','rotate('+rotate+'deg)'); 
      $(this).css('-moz-transform','rotate('+rotate+'deg)');
      $(this).css('transform','rotate('+rotate+'deg)');
    },
    duration:'slow'
    },'linear')

}

function rotateFoo2(){

    $('#foo').animate({borderSpacing: -90}, {
    step: function(now,fx) 
    {
        rotate-=2.1;
      $(this).css('-webkit-transform','rotate('+rotate+'deg)'); 
      $(this).css('-moz-transform','rotate('+rotate+'deg)');
      $(this).css('transform','rotate('+rotate+'deg)');
    },
    duration:'slow'
    },'linear')

}

和HTML：

<div id="foo">Text</div>
<button onclick="rotateFoo()">rotate</button>
<button onclick="rotateFoo2()">rotate</button>

请参阅演示JSFIDDLE

您也可以使用此js库Transit

Answer 3

安东的回答是一个良好的开端，但对于任何想要向两个方向转动的人来说，它需要一些工作。这是一个演示：https://jsfiddle.net/hyrLcw0f/

function rotateLeft(){
    var angle = ($('#foo').data('angle')) || 0;
    angle -= 90;
    $('#foo').css({'transform': 'rotate(' + angle + 'deg)'});
    $('#foo').data('angle', angle);
}

function rotateRight(){
    var angle = ($('#foo').data('angle')) || 0;
    angle += 90;
    $('#foo').css({'transform': 'rotate(' + angle + 'deg)'});
    $('#foo').data('angle', angle);
}

jquery css在每个按钮上连续旋转90度

3 个答案: