Rotating a Div Element in jQuery

by

To rotate a DIV Make use of WebkitTransform / -moz-transform: rotate(Xdeg).

This will not work in IE. The Raphael library does work with IE and it does rotation. I believe it uses canvases

If you want to animate the rotation, you can use a recursive setTimeout()

You could probably even do part of a spin with jQuery’s .animate()

Make sure that you consider the width of your element. If rotate an that has a larger width than its visible content, you’ll get funny results. However you can narrow the widths of elements, and then rotate them.

Here is a simply jQuery snippet that rotates the elements in a jQuery object. Rotatation can be started and stopped:

$(function() {
    var $elie = $(selectorForElementsToRotate);
    rotate(0);
    function rotate(degree) {

          // 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)'});

          // Animate rotation with a recursive call
        setTimeout(function() { rotate(++degree); },5);
    }
});

jsFiddle example

Note:
Taking the degree and increasing it, will rotate the image clockwise. Decreasing the degree of rotation will rotate the image counter clockwise.

More Related Contents:

  1. jQuery find events handlers registered with an object
  2. Determine if $.ajax error is a timeout
  3. Access-Control-Allow-Origin error sending a jQuery Post to Google API’s
  4. TypeError: $.ajax(…) is not a function?
  5. jQuery loop over JSON result from AJAX Success?
  6. Jquery – How to make $.post() use contentType=application/json?
  7. How can I load webpage content into a div on page load?
  8. jQuery animate background position
  9. How to know when all ajax calls are complete
  10. How to make a jquery infinite animation?
  11. Ajax in Jquery does not work from local file
  12. Ajax request with JQuery on page unload
  13. How to make Asynchronous(AJAX) File Upload using iframe?
  14. jQuery: select an element’s class and id at the same time?
  15. JQUERY ajax passing value from MVC View to Controller
  16. wait for a jquery ajax callback from calling function
  17. Why cant I load an external resource from jQuery load method?
  18. Events not registering after replaceWith
  19. Redirecting after AJAX post in Django
  20. How to return a JSON object in standard web forms .Net
  21. How do I pass a Dictionary as a parameter to an ActionResult method from jQuery/Ajax?
  22. jQuery ajax request being block because Cross-Origin
  23. jQuery $.animate() multiple elements but only fire callback once
  24. Display PNG image as response to jQuery AJAX request
  25. AJAX Post of JavaScript String Array to JsonResult as List Always Returns Null?
  26. How to submit form without refreshing page using Django, Ajax, jQuery?
  27. Invoke ColdFusion function using AJAX
  28. Get the selected option id with jQuery
  29. Mailchimp subscribe using jQuery AJAX?
  30. What happens when no response is received for a request? I’m seeing retries

Leave a Comment