CODEWITHSUNDEEP
javascriptjquerycssrotation
Greg Peckory
Greg Peckory

Reputation: 8078

How to use css method of rotation in jquery

When my webpage is first loaded, my starting div rotates using this CSS code:

    @keyframes rotate
    {
    from {    transform:rotate(0deg);
    -ms-transform:rotate(0deg); 
    -webkit-transform:rotate(0deg); }

    to {    transform:rotate(360deg);
    -ms-transform:rotate(360deg); 
    -webkit-transform:rotate(360deg); }
    }

    @-webkit-keyframes rotate 
    {
    from {    transform:rotate(0deg);
    -ms-transform:rotate(0deg); 
    -webkit-transform:rotate(0deg); }

    to {    transform:rotate(360deg);
    -ms-transform:rotate(360deg); 
    -webkit-transform:rotate(360deg); }
    }

After the rotation, this code is useless. I would like it so when a button is clicked, it will make this rotation again. To do this I need to be able to put this css code into a javascript/jQuery function so I can call it at any time. Is this possible?

Upvotes: 0

Views: 2342

Answers (3)

Roko C. Buljan
Roko C. Buljan

Reputation: 206689

by simply applying the CSS properties and the desired values to jQuery

DEMO

$(' #box ').css({
    transition: '2s linear',
    transform: 'rotate(360deg)'
});

P.S: jQuery will handle all those -browser-specific prefixes for you.

Upvotes: 2

m90
m90

Reputation: 11822

You can wrap your animation behavior into a class like:

.rotate{
  -webkit-animation: rotate 4s;
  /* more prefixes if you want to */
  animation: rotate 4s;
}

Then you can apply that class on click of your button like:

$('#myButton').click(function(){
  $('#myElementToAnimate').addClass('rotate');
});

To remove the class once your animation has finished you have to listen for the animationend event like:

$('#myButton').click(function(){
  // all the different event names are due to the fact that this isn't fully standardized yet
  $('#myElementToAnimate').addClass('rotate').on('animationend webkitAnimationEnd oanimationend MSAnimationEnd', function(){
    $(this).removeClass('rotate');
  });
});

This should give you smoother results than using JavaScript based animation. See this demo fiddle

Upvotes: 2

Vaibs_Cool
Vaibs_Cool

Reputation: 6150

TRY THIS 

   $({deg: 0}).animate({deg: d}, {
            duration: 2000,
            step: function(now){
                elem.css({
                     transform: "rotate(" + now + "deg)"
                });
            }
        });

Look at JSFIDDLE DEMO

Upvotes: 2

Related Questions