我想在点击时旋转此div，但我无法弄清楚如何...
这是我现在的代码，也许有人可以帮助我！？
HTML：
<div class="centerbox">
<div id="boxopen" style="cursor:pointer"></div>
</div>
CSS：
#boxopen {
width: 100px;
height: 100px;
margin: -9px 49.9%;
position: absolute;
border: 6px double #1a1a1a;
z-index: 110;
}
.centerbox {
margin: 0 -64.5px;
}
@keyframes rotate {
0% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
}
使用Javascript：
<script type="text/javascript">
boxopen.addEventListener("click", function(){
boxopen.style.animation = "rotate 2s";
boxopen.style.webkitAnimation = "rotate 2s";
});
</script>
它将用于响应式布局，所以我把它定位：绝对;也许有人知道更好的方法来解决这个问题哈哈。
谢谢！
答案 0 :(得分：2)
这样的事情可以做到：
$("div").click(function() {
$("div").toggleClass("rot");
});.rot {
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
div {
-webkit-transition: transform 1s ease-in-out;
transition: transform 1s ease-in-out;
width: 30px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div>imadiv</div>
因为您设置了transition，因此您无需担心key-frames，因为它会自动补间动画。
答案 1 :(得分：1)
在你的JS中，你缺少选择你的DIV。
所以添加你的代码：
var boxopen = document.getElementById('boxopen');
并在rotate上为您的div添加click课程，以便应用您的动画。
此代码不使用jQuery，当您单击div时，它会旋转。
示例：https://jsfiddle.net/sz2yfr51/2/
var boxopen = document.getElementById('boxopen'); // you were missing this code
boxopen.addEventListener("click", function(){
boxopen.style.animation = "rotate 2s";
boxopen.style.webkitAnimation = "rotate 2s";
});
答案 2 :(得分：0)
这可能很有趣
html
<p>Drag the square and let the magic happen</p>
<div id="container">
<div id="elem">
<div class="elem-cell" >
<span class="visual-elem">They see me Rollin'ggggg...</span>
</div>
</div>
</div>
css
#container{
position:relative;
left:20px;
top:20px;
display:inline-block;
}
#elem{
display:table;
border:none;
background-color:orange;
width:100px;
height:100px;
cursor:pointer;
}
#elem .elem-cell{
display:table-cell;
vertical-align:middle;
text-align:center;
padding:10px;
}
JavaScript
/*KAISARCODE ROTATE DIAL ****************************************************
* *
* Copyright (C) 2006 - 2015 KaisarCode.com *
* *
* This program is free software: you can redistribute it and/or modify *
* it under the terms of the GNU Lesser General Public License as *
* published by the Free Software Foundation, either version 3 of the *
* License, or (at your option) any later version. *
* *
* This program is distributed in the hope that it will be useful, *
* but WITHOUT ANY WARRANTY; without even the implied warranty of *
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the *
* GNU Lesser General Public License for more details. *
* *
* You should have received a copy of the GNU General Public License *
* along with this program. If not, see <http://www.gnu.org/licenses/>. *
* *
*****************************************************************************/
var kcRotateDial = function(elem) {
var output = {};
//Preventing elem to being selected on IE
if(document.all && !window.opera) elem.setAttribute("unselectable","on");
//Public Properties
output.rad = 0;
output.deg = 0;
output.per = 0;
output.fullRad = 0;
output.fullDeg = 0;
output.fullPer = 0;
output.spin = 0;
output.clock = false;
//Private properties
var drag = false;
var pos = [];
var size = [];
var axis = [];
var cursor = [];
var rad = 0;
var lastRad = 0;
var lastPer = 0;
var lastFullRad = 0;
var maxRad = 6.283185307179586;
var maxDeg = 360;
var maxPer = 100;
var Dx;
var Dy;
var dummy;
//Public Methods
output.onchange = function() {};
//Private Methods
function preventDefault(e) {
//prevent event's default action
if(window.event) e = window.event;
if(e.preventDefault) { e.preventDefault() }else{ e.returnValue = false };
}
function stopPropagation(e) {
//stp event propagation
if(window.event) e = window.event;
if(e.stopPropagation) { e.stopPropagation() }else{ e.bubbles = false };
}
function getPos(elem) {
//get the position [left,top] relative to whole document
var tmp = elem;
var left = tmp.offsetLeft;
var top = tmp.offsetTop;
while (tmp = tmp.offsetParent) left += tmp.offsetLeft;
tmp = elem;
while(tmp = tmp.offsetParent) top += tmp.offsetTop;
return [left, top];
}
function getSize(elem) {
//return the size [width,height] of the element
return [elem.offsetWidth, elem.offsetHeight];
}
function getAxis(elem) {
//return the center point [left,top] of the element
return [getPos(elem)[0] + getSize(elem)[0]/2,getPos(elem)[1] + getSize(elem)[1]/2];
}
function getCursorPos(e) {
//return the cursor's position [x,y]
var cursorPos;
if(window.event) e = window.event;
if(e.clientX) cursorPos = [e.clientX,e.clientY];
if(e.pageX) cursorPos = [e.pageX,e.pageY];
try{ if(e.targetTouches[0]) cursorPos = [e.targetTouches[0].pageX,e.targetTouches[0].pageY] } catch(err) {};
return cursorPos;
}
function getAngle(e) {
//getting rotation angle by Arc Tangent 2
var rad;
pos = getPos(elem);
size = getSize(elem);
axis = getAxis(elem);
cursor = getCursorPos(e);
try{rad = Math.atan2(cursor[1]-axis[1], cursor[0]-axis[0])} catch(err) {};
//correct the 90° of difference starting from the Y axis of the element
rad += maxRad/4;
//transform opposite angle negative value, to possitive
if(rad<0) rad += maxRad;
return rad;
}
function setDrag(e,bool) {
//set or unset the drag flag
if(bool) {
preventDefault(e);
stopPropagation(e);
rad = getAngle(e);
drag = true;
}else{
drag = false;
}
}
function rotate(e) {
//Rotate the element
if(drag) {
//setting control variables
var cursorRad;
var relativeRad;
var rotationRad;
cursorRad = getAngle(e);
relativeRad = cursorRad - rad;
var rotationRad = lastRad + relativeRad;
if(isNaN(rotationRad)) rotationRad = lastRad;
if(rotationRad<0) rotationRad = maxRad;
if(rotationRad>maxRad) rotationRad = 0;
rad = cursorRad;
//applying rotation to element
elem.style.transform = "rotate("+ rotationRad +"rad)";
elem.style.MozTransform = "rotate("+ rotationRad +"rad)";
elem.style.WebkitTransform = "rotate("+ rotationRad +"rad)";
elem.style.OTransform = "rotate("+ rotationRad +"rad)";
elem.style.MsTransform = "rotate("+ rotationRad +"rad)";
//rotation Matrix for IExplorer
var iecos = Math.cos(cursorRad);
var iesin = Math.sin(cursorRad);
Dx = -(size[0]/2)*iecos + (size[1]/2)*iesin + (size[0]/2);
Dy = -(size[0]/2)*iesin - (size[1]/2)*iecos + (size[1]/2);
elem.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11 = "+ iecos +", M12 = "+ -iesin +", M21 = "+ iesin +", M22 = "+ iecos +", Dx = "+ Dx +", Dy = "+ Dy +", SizingMethod = auto expand)";
elem.style.msFilter = "progid:DXImageTransform.Microsoft.Matrix(M11 = "+ iecos +", M12 = "+ -iesin +", M21 = "+ iesin +", M22 = "+ iecos +", Dx = "+ Dx +", Dy = "+ Dy +", SizingMethod = auto expand)";
//assigning values to public properties
output.rad = rotationRad;
output.deg = maxDeg*output.rad / (2*Math.PI);
output.per = (output.rad*maxPer) / maxRad;
if((lastPer<= 100 && lastPer >= 60) && (output.per >= 0 && output.per <= 30)) output.spin++;
if((lastPer<= 30 && lastPer >= 0) && (output.per >= 60 && output.per <= 100)) output.spin--;
output.fullRad = output.rad + (maxRad*output.spin);
output.fullDeg = output.deg + (maxDeg*output.spin);
output.fullPer = output.per + (maxPer*output.spin);
if(lastFullRad<output.fullRad) output.clock = true;
if(lastFullRad>output.fullRad) output.clock = false;
lastRad = rotationRad;
lastPer = output.per;
lastFullRad = output.fullRad;
output.onchange();
}
}
//Listen events
if(elem.attachEvent) {
elem.attachEvent('onmousedown', function() { setDrag(0, true) });
document.attachEvent('onmouseup', function() { setDrag(0, false) });
document.attachEvent('onmousemove', function() { rotate(0) });
}else if(elem.addEventListener) {
elem.addEventListener('mousedown', function(e) { setDrag(e, true) });
document.addEventListener('mouseup', function(e) { setDrag(e, false) });
document.addEventListener('mousemove', function(e) { rotate(e) });
try{ elem.addEventListener('touchstart', function(e) { setDrag(e,true); }) } catch(err) {}
try{ document.addEventListener('touchend', function(e) { setDrag(e,false); }) } catch(err) {}
try{ document.addEventListener('touchmove', function(e) { rotate(e)}) } catch(err) {}
}
//Fixing black box issue on IE9
dummy = document.createElement("div");
dummy.innerHTML = '<!--[if gte IE 9]><br /><![endif]-->';
if(dummy.getElementsByTagName("br").length == 1) elem.style.filter = "none";
delete dummy;
//Output
return output;
}
var elem = document.getElementById("elem");
kcRotateDial(elem);
它启用div元素的交互式旋转，包括文本，图像等。 在https://github.com/KaisarCode/JavaScript-Rotate
中了解更多信息