jquery css在每次按下按钮时连续旋转90度答案

【问题标题】：jquery css continous rotate by 90 degrees on each button pressjquery css在每次按下按钮时连续旋转90度
【发布时间】：2014-07-11 02:45:54
【问题描述】：

我找到了部分满足我需求的解决方案。当按下一个按钮时，我需要一个 div 旋转 90 度，然后再按下 90 度等。我需要另一个按钮，它会以相同的方式以相反的方向旋转它。我找到了一个 JavaScript Fiddle 并对其稍作修改，但问题是按下按钮时，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;
}

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”值从何而来？您需要一种存储元素的新位置（多个元素的数组）的方法，“现在”可以添加到当前位置（或在您实现其他 buttkn 时减去）
有趣的是我无法弄清楚“现在”的来源。我以linkJSFIDDLE 为基础。

标签： jquery css animation rotation

【解决方案1】：

你可以稍微改变一下，让它成为你想要的东西：

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>

请看DEMOJSFIDDLE

你也可以使用这个js库Transit

【讨论】：

请测试一些数字或添加一些条件来修复它。让我现在修复它。

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

Anton 的回答是一个好的开始，但对于希望在两个方向上旋转的人来说，它需要一些工作。这是一个演示：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);
}

【讨论】：