最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

jquery - Rotate div on click with javascript - Stack Overflow

programmeradmin5浏览0评论

I want to rotate this div on click but i couldn't figure out how..

This is my code right now, maybe someone can help me!?

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>

It will be used in a responsive layout so i made it position: absolute;, maybe someone knows an better way to solve this problem haha.

Thanks!

I want to rotate this div on click but i couldn't figure out how..

This is my code right now, maybe someone can help me!?

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>

It will be used in a responsive layout so i made it position: absolute;, maybe someone knows an better way to solve this problem haha.

Thanks!

Share Improve this question edited Jul 16, 2015 at 14:15 LcSalazar 16.8k3 gold badges40 silver badges71 bronze badges asked Jul 16, 2015 at 14:08 Vincent VervoortVincent Vervoort 251 gold badge1 silver badge4 bronze badges 3
  • 2 If you are using CSS to rotate the object you should only use jquery to add a class on click. so when the user clicks the object it will add the rotate class and the CSS will do its rotate animation. - This might be a good place for you to start - w3schools./css/css3_2dtransforms.asp – Andrew Commented Jul 16, 2015 at 14:10
  • possible duplicate of jQuery: Toggle rotate div on click function – Christopher Wirt Commented Jul 16, 2015 at 14:13
  • this ans also help you : stackoverflow./questions/37452477/… – RAJNIK PATEL Commented May 3, 2017 at 9:39
Add a ment  | 

3 Answers 3

Reset to default 4

Something like this would do it:

$("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./ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div>imadiv</div>

because you have set transition you don't need to worry about key-frames as it auto tween's your animation.

In your JS, you are missing to select your DIV.

So add in your code:

var boxopen = document.getElementById('boxopen');

And add a rotate class to your div on click in order to apply your animation.

This code does not use jQuery, when you click on the div, it rotates.

Example: https://jsfiddle/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";
});

This one might be of interest

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.                              *
*                                                                           *
*    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/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);

It enables interactive rotation of div element, be it text, image, etc. Read more at https://github./KaisarCode/JavaScript-Rotate

Reference example: https://jsfiddle/rpdxz9mj/

发布评论

评论列表(0)

  1. 暂无评论