How to rotate an object 120deg on every click with CSS-transition/transform throu JS


Tags: javascript,css,rotation,css-transitions,css-transforms

Problem :

I want to rotate my blueRect 120 deg from its place everytime you push the button, I cant get it to work doh, anyone that can se whats wrong in my code? I know I havent got all the prefixes. jsfiddle: http://jsfiddle.net/a0mycee7/

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<style>
    #blueRect{
        width: 50px;
        height: 50px;
        background-color: #aaaaff;
        border: solid 3px #000000;
        margin-left: 30px;
        transition: all 2s ease-out;
        -moz-transition: all 2s ease-out;
    }
</style>

<script type="text/javascript">

   var angle = 0;

   $('#right').click(function() {
       //$(this).toggleClass('active');
       angle+=120;
        $('#blueRect').css ({
            'transform: rotate(' + angle + 'deg)',
            '-webkit-transform: rotate(' + angle + 'deg)',
               '-moz-transform: rotate(' + angle + 'deg)',
                 '-o-transform: rotate(' + angle + 'deg)',
                '-ms-transform: rotate(' + angle + 'deg)'
        });
    });
</script>
</head>
<body>

<div id="background">

    <div id="blueRect">
    </div>

</div>

<button id="right">1</button>

</body>
</html>


Solution :

The argument passed to .css was not a valid object. The following code should work:

(jQuery was not loaded in the fiddle, and is also needed :) )

var angle = 0;
$('#right').click(function() {
   //$(this).toggleClass('active');
   angle+=120;
    $('#blueRect').css ({
        'transform': 'rotate(' + angle + 'deg)',
        '-webkit-transform': 'rotate(' + angle + 'deg)',
           '-moz-transform': 'rotate(' + angle + 'deg)',
             '-o-transform': 'rotate(' + angle + 'deg)',
            '-ms-transform': 'rotate(' + angle + 'deg)'
    });
});

    CSS Howto..

    How to style Bootstrap menu like a V? [closed]

    How to prevent the CSS `:before` text being editable while the `div` itself is editable?

    How to animate sections in pure CSS when scrolling the page?

    How to get Susy going with a CSS only toggle navigation

    How can I print a full gridview area via a custom print window?

    How to put a background image on a site

    How do I download many of the same pictures fewer times with html, css, jquery, etc.?

    How to use a CSS sprite for a Repeating background image?

    How to keep table headers fixed while scrolling down a table

    CSS - how to avoid class= for every single paragraph?

    How to get the position of element transformed with css rotate

    How to do mobile devices-friendly CSS for both desktop and mobile devices

    Displaying the first in simple Show / Hide content menu with active a

    How to make a multi-tiered dropdown menu with HTML and CSS only (maybe tiny JavaScript)

    How to Add flexibility to SASS for another color

    How to limit click area to text?

    How to select text, but not images, in CSS

    How to have this horizontal CSS based navigation menu work properly?

    CSS: how to make a list item containing a form “submittable”?

    How can I absolutely position a related image_tag?

    Fill dynamic
    's with content. But how to show it?

    Why won't my background show within div container?

    How to make the 2nd column in a 2 column Bootstrap grid the same height as the 1st column

    How to have two items be placed next to each other in HTML?

    On a web page how do I display a label that changes to a drop down box on hover

    How to make CSS visible only for Android phone UC browser

    How Do I Modify My Linear Gradient Width to 100%?

    how to apply css on only one class?

    How to have multiple CSS color transitions on a single text line?

    How to build sliding horizontal menu. CSS