Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to rotate a div using jQuery [closed]

Tags:

jquery

Is it possible to rotate a div using jQuery? I can rotate an image but can't rotate a div; is there any solution for this?

like image 469
DEVOPS Avatar asked Jun 11 '10 07:06

DEVOPS


People also ask

How to rotate a div CSS?

The CSS rotate() function lets you rotate an element on a 2D axis. The rotate() function accepts one argument: the angle at which you want to rotate your web element. You can rotate an element clockwise or counter-clockwise.

How to rotate angle in CSS?

The CSS rotate() function is used to rotate elements in a two-dimensional space. The rotate() function rotates an element based on the angle that you provide as an argument. You can provide the angle using any valid CSS angle value (i.e. in degrees, gradians, radians, or turns).


1 Answers

EDIT: Updated for jQuery 1.8

Since jQuery 1.8 browser specific transformations will be added automatically. jsFiddle Demo

var rotation = 0;  jQuery.fn.rotate = function(degrees) {     $(this).css({'transform' : 'rotate('+ degrees +'deg)'});     return $(this); };  $('.rotate').click(function() {     rotation += 5;     $(this).rotate(rotation); }); 

EDIT: Added code to make it a jQuery function.

For those of you who don't want to read any further, here you go. For more details and examples, read on. jsFiddle Demo.

var rotation = 0;  jQuery.fn.rotate = function(degrees) {     $(this).css({'-webkit-transform' : 'rotate('+ degrees +'deg)',                  '-moz-transform' : 'rotate('+ degrees +'deg)',                  '-ms-transform' : 'rotate('+ degrees +'deg)',                  'transform' : 'rotate('+ degrees +'deg)'});     return $(this); };  $('.rotate').click(function() {     rotation += 5;     $(this).rotate(rotation); }); 

EDIT: One of the comments on this post mentioned jQuery Multirotation. This plugin for jQuery essentially performs the above function with support for IE8. It may be worth using if you want maximum compatibility or more options. But for minimal overhead, I suggest the above function. It will work IE9+, Chrome, Firefox, Opera, and many others.


Bobby... This is for the people who actually want to do it in the javascript. This may be required for rotating on a javascript callback.

Here is a jsFiddle.

If you would like to rotate at custom intervals, you can use jQuery to manually set the css instead of adding a class. Like this! I have included both jQuery options at the bottom of the answer.

HTML

<div class="rotate">     <h1>Rotatey text</h1> </div> 

CSS

/* Totally for style */ .rotate {     background: #F02311;     color: #FFF;     width: 200px;     height: 200px;     text-align: center;     font: normal 1em Arial;     position: relative;     top: 50px;     left: 50px; }  /* The real code */ .rotated {     -webkit-transform: rotate(45deg);  /* Chrome, Safari 3.1+ */     -moz-transform: rotate(45deg);  /* Firefox 3.5-15 */     -ms-transform: rotate(45deg);  /* IE 9 */     -o-transform: rotate(45deg);  /* Opera 10.50-12.00 */     transform: rotate(45deg);  /* Firefox 16+, IE 10+, Opera 12.10+ */ } 

jQuery

Make sure these are wrapped in $(document).ready

$('.rotate').click(function() {     $(this).toggleClass('rotated'); }); 

Custom intervals

var rotation = 0; $('.rotate').click(function() {     rotation += 5;     $(this).css({'-webkit-transform' : 'rotate('+ rotation +'deg)',                  '-moz-transform' : 'rotate('+ rotation +'deg)',                  '-ms-transform' : 'rotate('+ rotation +'deg)',                  'transform' : 'rotate('+ rotation +'deg)'}); }); 
like image 186
Dan Grahn Avatar answered Sep 20 '22 09:09

Dan Grahn