Rotating a Div Element in jQuery

Question

Trying to rotate a div element   This might be DOM blasphemy  could it work possibly with a canvas element  I m not sure - if anybody has any ideas of how this could work or why it doesn t  I d love to know  Thanks

User · Answer

Cross-browser rotate for any element  Works in IE7 and IE8  In IE7 it looks like not working in JSFiddle but in my project worked also in IE7  http   jsfiddle net RgX86 24   var elementToRotate       rotateMe    var degreeOfRotation   33   var deg   degreeOfRotation  var deg2radians   Math PI   2   360  var rad   deg   deg2radians   var costheta   Math cos rad   var sintheta   Math sin rad    var m11   costheta  var m12   -sintheta  var m21   sintheta  var m22   costheta  var matrixValues    M11     m11      M12    m12     M21    m21     M22    m22   elementToRotate css  -webkit-transform   rotate   deg  deg         css  -moz-transform   rotate   deg  deg         css  -ms-transform   rotate   deg  deg         css  transform   rotate   deg  deg         css  filter    progid DXImageTransform Microsoft Matrix sizingMethod   auto expand     matrixValues           css  -ms-filter    progid DXImageTransform Microsoft Matrix SizingMethod   auto expand     matrixValues         Edit 13 09 13 15 00 Wrapped in a nice and easy  chainable  jquery plugin   Example of use    fn rotateElement   function angle        var elementToRotate   this          deg   angle          deg2radians   Math PI   2   360          rad   deg   deg2radians           costheta   Math cos rad           sintheta   Math sin rad            m11   costheta          m12   -sintheta          m21   sintheta          m22   costheta          matrixValues    M11     m11      M12    m12     M21    m21     M22    m22       elementToRotate css  -webkit-transform   rotate   deg  deg             css  -moz-transform   rotate   deg  deg             css  -ms-transform   rotate   deg  deg             css  transform   rotate   deg  deg             css  filter    progid DXImageTransform Microsoft Matrix sizingMethod   auto expand     matrixValues               css  -ms-filter    progid DXImageTransform Microsoft Matrix SizingMethod   auto expand     matrixValues           return elementToRotate      element rotateElement 15     JSFiddle  http   jsfiddle net RgX86 175

User · Answer

yeah you re not going to have much luck i think  Typically across the 3 drawing methods the major browsers use  Canvas  SVG  VML   text support is poor  I believe  If you want to rotate an image  then it s all good  but if you ve got mixed content with formatting and styles  probably not   Check out RaphaelJS for a cross-browser drawing API

User · Answer

I put together an animated rotate code program    you can get your code here      if not to late   http   99mission why3s tw rotatetest html

User · Answer

I put together an animated rotate code program    you can get your code here      if not to late   http   99mission why3s tw rotatetest html

User · Answer

EDIT  Updated for jQuery 1 8  jQuery 1 8 will add browser specific transformations  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   lt div class  rotate  gt       lt h1 gt Rotatey text lt  h1 gt   lt  div gt    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

User · Answer

yeah you re not going to have much luck i think  Typically across the 3 drawing methods the major browsers use  Canvas  SVG  VML   text support is poor  I believe  If you want to rotate an image  then it s all good  but if you ve got mixed content with formatting and styles  probably not   Check out RaphaelJS for a cross-browser drawing API

User · Answer

I doubt you can rotate an element using DOM CSS   Your best bet would be to render to a canvas and rotate that  not sure on the specifics

User · Answer

I doubt you can rotate an element using DOM CSS   Your best bet would be to render to a canvas and rotate that  not sure on the specifics

User · Answer

Cross-browser rotate for any element  Works in IE7 and IE8  In IE7 it looks like not working in JSFiddle but in my project worked also in IE7  http   jsfiddle net RgX86 24   var elementToRotate       rotateMe    var degreeOfRotation   33   var deg   degreeOfRotation  var deg2radians   Math PI   2   360  var rad   deg   deg2radians   var costheta   Math cos rad   var sintheta   Math sin rad    var m11   costheta  var m12   -sintheta  var m21   sintheta  var m22   costheta  var matrixValues    M11     m11      M12    m12     M21    m21     M22    m22   elementToRotate css  -webkit-transform   rotate   deg  deg         css  -moz-transform   rotate   deg  deg         css  -ms-transform   rotate   deg  deg         css  transform   rotate   deg  deg         css  filter    progid DXImageTransform Microsoft Matrix sizingMethod   auto expand     matrixValues           css  -ms-filter    progid DXImageTransform Microsoft Matrix SizingMethod   auto expand     matrixValues         Edit 13 09 13 15 00 Wrapped in a nice and easy  chainable  jquery plugin   Example of use    fn rotateElement   function angle        var elementToRotate   this          deg   angle          deg2radians   Math PI   2   360          rad   deg   deg2radians           costheta   Math cos rad           sintheta   Math sin rad            m11   costheta          m12   -sintheta          m21   sintheta          m22   costheta          matrixValues    M11     m11      M12    m12     M21    m21     M22    m22       elementToRotate css  -webkit-transform   rotate   deg  deg             css  -moz-transform   rotate   deg  deg             css  -ms-transform   rotate   deg  deg             css  transform   rotate   deg  deg             css  filter    progid DXImageTransform Microsoft Matrix sizingMethod   auto expand     matrixValues               css  -ms-filter    progid DXImageTransform Microsoft Matrix SizingMethod   auto expand     matrixValues           return elementToRotate      element rotateElement 15     JSFiddle  http   jsfiddle net RgX86 175

User · Answer

Here are two jQuery patches to help out  maybe already included in jQuery by the time you are reading this     Patching jQuery css   Method to Support  transform  jQuery Patch  Animate CSS Rotation and Scale

User · Answer

EDIT  Updated for jQuery 1 8  jQuery 1 8 will add browser specific transformations  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   lt div class  rotate  gt       lt h1 gt Rotatey text lt  h1 gt   lt  div gt    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

User · Answer

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

User · Answer

I doubt you can rotate an element using DOM CSS   Your best bet would be to render to a canvas and rotate that  not sure on the specifics

User · Answer

I doubt you can rotate an element using DOM CSS   Your best bet would be to render to a canvas and rotate that  not sure on the specifics

User · Answer

Here are two jQuery patches to help out  maybe already included in jQuery by the time you are reading this     Patching jQuery css   Method to Support  transform  jQuery Patch  Animate CSS Rotation and Scale

User · Answer

yeah you re not going to have much luck i think  Typically across the 3 drawing methods the major browsers use  Canvas  SVG  VML   text support is poor  I believe  If you want to rotate an image  then it s all good  but if you ve got mixed content with formatting and styles  probably not   Check out RaphaelJS for a cross-browser drawing API

User · Answer

yeah you re not going to have much luck i think  Typically across the 3 drawing methods the major browsers use  Canvas  SVG  VML   text support is poor  I believe  If you want to rotate an image  then it s all good  but if you ve got mixed content with formatting and styles  probably not   Check out RaphaelJS for a cross-browser drawing API

User · Answer

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

[jquery] Rotating a Div Element in jQuery

Examples related to jquery

Examples related to ajax

Examples related to dom

Examples related to canvas

Examples related to jquery-animate