使用javascript旋转div

我想单击一个div并旋转另一个div，然后当再次单击第一个div时，另一个div将旋转回其原始位置

---

如果需要，我可以引用这个库。

要旋转DIV，我们可以添加一些CSS，使用CSS transform rotate旋转DIV

要切换旋转，我们可以保留一个标志，一个简单的变量，带有一个布尔值，告诉我们旋转的方式

var rotated = false;

document.getElementById('button').onclick = function() {
    var div = document.getElementById('div'),
        deg = rotated ? 0 : 66;

    div.style.webkitTransform = 'rotate('+deg+'deg)'; 
    div.style.mozTransform    = 'rotate('+deg+'deg)'; 
    div.style.msTransform     = 'rotate('+deg+'deg)'; 
    div.style.oTransform      = 'rotate('+deg+'deg)'; 
    div.style.transform       = 'rotate('+deg+'deg)'; 

    rotated = !rotated;
}

var=false；
document.getElementById（'button'）。onclick=function（）{
var div=document.getElementById（'div'），
度=旋转？0:66；
div.style.webkitttransform='旋转（'+deg+'deg'）；
div.style.mozTransform='旋转（'+deg+'deg'）；
div.style.msTransform='旋转（'+deg+'deg'）；
div.style.oTransform='旋转（'+deg+'deg'）；
div.style.transform='旋转（'+deg+'deg'）；
旋转=！旋转；
}

#div{
位置：相对位置；
高度：200px；
宽度：200px；
利润率：30像素；
背景：红色；
}

旋转

假设您使用的是jQuery和css3，则可以非常轻松地完成：

HTML:

JS:

---

我最近不得不建造类似的东西。您可以在下面的代码段中查看它

我必须构建的版本使用相同的按钮来启动和停止旋转器，但是如果有一个按钮来启动旋转，另一个按钮来停止旋转，则可以对代码进行操作

基本上，我的代码看起来像这样

运行代码段

var rocket=document.querySelector（'.rocket'）；
var btn=document.querySelector（'.toggle'）；
var=false；
var转轮；
变量度=0；
函数start（）{
runner=setInterval（函数（）{
学位++；
rocket.style.webkitttransform='旋转（'+度+'度）'；
},50)
}
函数停止（）{
间隔时间（跑步者）；
}
btn.addEventListener（'click'，function（）{
如果（！旋转）{
旋转=真；
start（）；
}否则{
旋转=假；
停止（）；
}
})

正文{
背景：#1e；
}    
.火箭{
宽度：150px；
高度：150像素；
边缘：1米；
边框：3件淡绿色；
边界半径：50%；
背景色：rgba（1280,0.5）；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.火箭h1{
保证金：0；
填充：0；
字体大小：.8em；
颜色：天蓝色；
字母间距：1米；
文本阴影：0 10px黑色；
}
.切换{
利润率：10px；
背景：#000；
颜色：白色；
字号：1em；
填充：.3em；
边框：2倍纯红；
大纲：无；
字母间距：3px；
}

SPIN ME
I/0

完美！有没有办法给旋转添加一些缓和的效果？jQuery的animate（）将为旋转设置动画，上面的解决方案也可以通过简单地交换类和使用css转换来完成。感谢您没有使用jQuery:）这里的大多数答案都是这样的。

<div id="clicker">Click Here</div>
<div id="rotating"></div>

#clicker { 
    width: 100px; 
    height: 100px; 
    background-color: Green; 
}

#rotating { 
    width: 100px; 
    height: 100px; 
    background-color: Red; 
    margin-top: 50px; 
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.rotated { 
    transform:rotate(25deg); 
    -webkit-transform:rotate(25deg); 
    -moz-transform:rotate(25deg); 
    -o-transform:rotate(25deg); 
}

$(document).ready(function() {
    $('#clicker').click(function() {
        $('#rotating').toggleClass('rotated');
    });
});