Rotate a div like circle onclick of a button

18-06-2014 16-24-29

<!DOCTYPE html>
 
<html lang="en">
    <head>
        <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="Stylesheet.css">
        <title></title>
        <style>
            #mainDiv{
                margin: 200px;
            }
            #myDiv
            {
                 width:200px;
                 height:20px;
                 position: absolute; /* this position absolute will only help to keep origin in same point*/
             
                 transform-origin:100% 100%; /*The transform-origin property allows you to change the position on transformed elements.*/
                 -ms-transform-origin:100% 100%; /* IE 9 */
                 -webkit-transform-origin:100% 100%; /* Safari and Chrome */
                 -moz-transform-origin:100% 100%; /* Firefox */
                  -o-transform-origin:100% 100%; 
                /* Rotate div 
                    transform:rotate(1deg);
                    -ms-transform:rotate(1deg); /* IE 9 */*/
                    /*-webkit-transform:rotate(1deg); /* Opera, Chrome, and Safari */
            }
            
        </style>
    </head>
    <body>
        <button id="myButton" type="button">Add</button>
<div id="mainDiv">
 
    </div>
<script>
 
   /* generate random colors */ 
     var safeColors = ['00','33','66','99','cc','ff'];
    var rand = function() {
    return Math.floor(Math.random()*6);
    };
    var randomColor = function() {
    var r = safeColors[rand()];
    var g = safeColors[rand()];
    var b = safeColors[rand()];
    return "#"+r+g+b;
    };
 
    /* end of random color generator on click*/
    //alert(color);
    var incvalue = 0; //global variable which increments with 5 on each click
    $("#myButton").click(function () {
        var degree = 0;
        var $elie = $("<div id='myDiv'>Hello</div>");
        function rotate(degree) {
            degree = degree + 5; //incrementing degree with 5 for each rotation
            // For webkit browsers: e.g. Chrome
            $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)' });
            // For Mozilla browser: e.g. Firefox
            $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)' }); // rotating div with 5 degrees by using css
            $elie.css('background-color', randomColor());//applying random color on each click
            //$elie.css({ WebkitTransform: 'background-color(' + randomColor + ')' });
            //$elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)' });
            console.log(degree);
            return degree;
        }
        incvalue = rotate(incvalue); //assigning degree(local) as incvalue(global) to global variable
        //return degree;
        console.log(degree);
        $("#mainDiv").append($elie) //assinging div tag to container named maindiv
    });
</script>   
       
    </body>
</html>

Stylesheet:
body {
}
#myDiv
{
width:200px;
height:20px;
background-color:red;
/* Rotate div 
transform:rotate(1deg);
-ms-transform:rotate(1deg); /* IE 9 */*/
/*-webkit-transform:rotate(1deg); /* Opera, Chrome, and Safari */
}
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s