javascript 使用javascript旋转div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19126432/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Rotate a div using javascript
提问by user2078845
I want to click on one div and rotate another div then when the firsts div is clicked again the other div rotates back to its original position.
我想单击一个 div 并旋转另一个 div，然后当再次单击第一个 div 时，另一个 div 旋转回其原始位置。
I can reference this library if required http://ricostacruz.com/jquery.transit.
如果需要，我可以参考这个库http://ricostacruz.com/jquery.transit。
回答by adeneo
To rotate a DIV we can add some CSS that, well, rotates the DIV using CSS transform rotate.
要旋转 DIV，我们可以添加一些 CSS，使用 CSS 变换旋转来旋转 DIV。
To toggle the rotation we can keep a flag, a simple variable with a boolean value that tells us what way to rotate.
为了切换旋转，我们可以保留一个标志，一个带有布尔值的简单变量，告诉我们旋转的方式。
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 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;
}#div {
position:relative;
height: 200px;
width: 200px;
margin: 30px;
background: red;
}<button id="button">rotate</button>
<br /><br />
<div id="div"></div>To add some animation to the rotation all we have to do is add CSS transitions
要为旋转添加一些动画，我们所要做的就是添加 CSS 过渡
div {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
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;
}#div {
position:relative;
height: 200px;
width: 200px;
margin: 30px;
background: red;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}<button id="button">rotate</button>
<br /><br />
<div id="div"></div>Another way to do it is using classes, and setting all the styles in a stylesheet, thus keeping them out of the javascript
另一种方法是使用类，并在样式表中设置所有样式，从而将它们排除在 javascript 之外
document.getElementById('button').onclick = function() {
document.getElementById('div').classList.toggle('rotated');
}
document.getElementById('button').onclick = function() {
document.getElementById('div').classList.toggle('rotated');
}#div {
position:relative;
height: 200px;
width: 200px;
margin: 30px;
background: red;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#div.rotated {
-webkit-transform : rotate(66deg);
-moz-transform : rotate(66deg);
-ms-transform : rotate(66deg);
-o-transform : rotate(66deg);
transform : rotate(66deg);
}<button id="button">rotate</button>
<br /><br />
<div id="div"></div>回答by karol.barkowski
Can be pretty easily done assuming you're using jQuery and css3:
假设您使用 jQuery 和 css3，可以很容易地完成：
HTML:
HTML：
<div id="clicker">Click Here</div>
<div id="rotating"></div>
CSS:
CSS：
#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);
}
JS:
JS：
$(document).ready(function() {
$('#clicker').click(function() {
$('#rotating').toggleClass('rotated');
});
});
回答by RealMJDev
I recently had to build something similar. You can check it out in the snippet below.
我最近不得不建立类似的东西。您可以在下面的代码段中查看它。
The version I had to build uses the same button to start and stop the spinner, but you can manipulate to code if you have a button to start the spin and a different button to stop the spin
我必须构建的版本使用相同的按钮来启动和停止微调器，但是如果你有一个按钮来开始旋转和一个不同的按钮来停止旋转，你可以操纵代码
Basically, my code looks like this...
基本上，我的代码看起来像这样......
Run Code Snippet
运行代码片段
var rocket = document.querySelector('.rocket');
var btn = document.querySelector('.toggle');
var rotate = false;
var runner;
var degrees = 0;
function start(){
runner = setInterval(function(){
degrees++;
rocket.style.webkitTransform = 'rotate(' + degrees + 'deg)';
},50)
}
function stop(){
clearInterval(runner);
}
btn.addEventListener('click', function(){
if (!rotate){
rotate = true;
start();
} else {
rotate = false;
stop();
}
})body {
background: #1e1e1e;
}
.rocket {
width: 150px;
height: 150px;
margin: 1em;
border: 3px dashed teal;
border-radius: 50%;
background-color: rgba(128,128,128,0.5);
display: flex;
justify-content: center;
align-items: center;
}
.rocket h1 {
margin: 0;
padding: 0;
font-size: .8em;
color: skyblue;
letter-spacing: 1em;
text-shadow: 0 0 10px black;
}
.toggle {
margin: 10px;
background: #000;
color: white;
font-size: 1em;
padding: .3em;
border: 2px solid red;
outline: none;
letter-spacing: 3px;
}<div class="rocket"><h1>SPIN ME</h1></div>
<button class="toggle">I/0</button>