使用javascript旋转div [英] Rotate a div using javascript
问题描述
我想点击一个div并旋转另一个div然后再次点击第一个div时另一个div旋转回原来的位置。
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.
我可以参考如果需要,可以使用此库 http://ricostacruz.com/jquery.transit 。
I can reference this library if required http://ricostacruz.com/jquery.transit.
推荐答案
要旋转DIV,我们可以添加一些CSS,使用CSS转换旋转旋转DIV。
To rotate a DIV we can add some CSS that, well, rotates the DIV using CSS transform rotate.
To切换旋转我们可以保留一个标志,一个带有布尔值的简单变量,告诉我们旋转的方式。
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>
要为旋转添加一些动画,我们所要做的就是添加CSS过渡
To add some animation to the rotation all we have to do is add CSS transitions
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>
另一种方法是使用类,并在样式表中设置所有样式,从而保留它们超出javascript
Another way to do it is using classes, and setting all the styles in a stylesheet, thus keeping them out of the 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>
这篇关于使用javascript旋转div的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!