CSS rotation cross browser with jquery animate

Question

I m working on creating a cross-browser compatible rotation  ie9   and I have the following code in a jsfiddle    document  ready function           DoRotate 30       AnimateRotate 30        function DoRotate d             MyDiv1   css              -moz-transform   rotate   d  deg               -webkit-transform   rotate   d  deg               -o-transform   rotate   d  deg               -ms-transform   rotate   d  deg               transform    rotate   d  deg                 function AnimateRotate d                 MyDiv2   animate              -moz-transform   rotate   d  deg               -webkit-transform   rotate   d  deg               -o-transform   rotate   d  deg               -ms-transform   rotate   d  deg               transform   rotate   d  deg           1000        The CSS and HTML are really simple and just for demo    SomeDiv      width 50px      height 50px             margin 50px 50px      background-color  red     lt div id  MyDiv1  class  SomeDiv  gt test lt  div gt   lt div id  MyDiv2  class  SomeDiv  gt test lt  div gt    The rotation works when using  css   but not when using  animate    why is that and is there a way to fix it   Thanks

User · Answer

Without plugin cross browser with setInterval                           function rotatePic                                 jQuery  deg  0   animate                                  deg  360                                     duration  3000  easing    linear                                     step  function now  fx                                      jQuery   id   css                                          -moz-transform   rotate   now  deg                                           -webkit-transform   rotate   now  deg                                           -o-transform   rotate   now  deg                                           -ms-transform   rotate   now  deg                                           transform   rotate   now  deg                                                                                                                                                            var sec   3                          rotatePic                            var timerInterval   setInterval function                                 rotatePic                                sec  3                              if  sec  gt  30                                    clearInterval timerInterval                                                            3000

User · Answer

Another answer  because jQuery transit is not compatible with jQuery easing  This solution comes as an jQuery extension  Is more generic  rotation is a specific case     fn extend       animateStep  function options            return this each function                 var elementOptions     extend     options   step  options step bind   this                     x  options from   animate  x  options to   elementOptions                          rotate  function value            return this css  transform    rotate     value    deg                 The usage is as simple as     element  animateStep  from  0  to  90  step    fn rotate

User · Answer

To do this cross browser including IE7   you will need to expand the plugin with a transformation matrix  Since vendor prefix is done in jQuery from jquery-1 8  I will leave that out for the transform property     fn animateRotate   function endAngle  options  startAngle        return this each function                 var elem     this   rad  costheta  sintheta  matrixValues  noTransform      transform  in this style     webkitTransform  in this style     msTransform  in this style     mozTransform  in this style     oTransform  in this style               anims       animsEnd               if typeof options      object                         options                         else if typeof options extra      object                         anims   options extra              animsEnd   options extra                    anims deg   startAngle          animsEnd deg   endAngle          options step   function now  fx                        if fx prop      deg                                 if noTransform                                        rad   now    Math PI   2   360                       costheta   Math cos rad                       sintheta   Math sin rad                       matrixValues    M11     costheta      M12 -   sintheta     M21    sintheta     M22    costheta                         body   append  Test     matrixValues     lt br   gt                         elem css                            filter    progid DXImageTransform Microsoft Matrix sizingMethod   auto expand     matrixValues                               -ms-filter    progid DXImageTransform Microsoft Matrix sizingMethod   auto expand     matrixValues                                                               else                                       elem css                             webkitTransform   rotate   now  deg                              mozTransform   rotate   now  deg                              msTransform   rotate   now  deg                              oTransform   rotate   now  deg                            transform   rotate   now  deg                                                                              if startAngle                          anims  animate animsEnd  options                     else                       elem animate animsEnd  options                          Note  The parameters options and startAngle are optional  if you only need to set startAngle use    or null for options   Example usage   var obj     document createElement  div     obj on  click   function        obj stop   animateRotate 180            duration  250          complete  function                         obj animateRotate 0                    duration  250                                       obj text  Click me     obj css  cursor   pointer   position   absolute        body   append obj     See also this jsfiddle for a demo   Update  You can now also pass extra     in the options  This will make you able to execute other animations simultaneously  For example   obj animateRotate 90   extra   marginLeft   100px   opacity  0 5       This will rotate the element 90 degrees  and move it to the right with 100px and make it semi-transparent all at the same time during the animation

User · Answer

Thanks yckart  Great contribution  I fleshed out your plugin a bit more  Added startAngle for full control and cross-browser css     fn animateRotate   function startAngle  endAngle  duration  easing  complete       return this each function            var elem     this               deg  startAngle   animate  deg  endAngle                 duration  duration              easing  easing              step  function now                   elem css                      -moz-transform   rotate   now  deg                       -webkit-transform   rotate   now  deg                       -o-transform   rotate   now  deg                       -ms-transform   rotate   now  deg                       transform   rotate   now  deg                                                  complete  complete      noop

User · Answer

jQuery transit will probably make your life easier if you are dealing with CSS3 animations through jQuery   EDIT March 2014   because my advice has constantly been up and down voted since I posted it   Let me explain why I was initially hinting towards the plugin above   Updating the DOM on each step  i e    animate   is not ideal in terms of performance   It works  but will most probably be slower than pure CSS3 transitions or CSS3 animations    This is mainly because the browser gets a chance to think ahead if you indicate what the transition is going to look like from start to end   To do so  you can for example create a CSS class for each state of the transition and only use jQuery to toggle the animation state    This is generally quite neat as you can tweak you animations alongside the rest of your CSS instead of mixing it up with your business logic      initial state  eye      -webkit-transform  rotate 45deg      -moz-transform  rotate 45deg      transform  rotate 45deg         etc         transition settings    -webkit-transition  -webkit-transform 1s linear 0 2s     -moz-transition  -moz-transform 1s linear 0 2s     transition  transform 1s linear 0 2s        etc        open state      eye open       transform  rotate 90deg         Javascript     eye   on  click   function        this  addClass  open          If any of the transform parameters is dynamic you can of course use the style attribute instead       eye   on  click   function             this  css            -webkit-transition   -webkit-transform 1s ease-in           -moz-transition   -moz-transform 1s ease-in                              note that jQuery will vendor prefix the transform property automatically         transform   rotate      Math random   45 45  toFixed 3     deg                  A lot more detailed information on CSS3 transitions on MDN    HOWEVER There are a few other things to keep in mind and all this can get a bit tricky if you have complex animations  chaining etc  and jQuery Transit just does all the tricky bits under the hood       eye   transit   rotate   90deg        easy huh

User · Answer

CSS-Transforms are not possible to animate with jQuery  yet  You can do something like this   function AnimateRotate angle           caching the object for performance reasons     var  elem       MyDiv2            we use a pseudo object for the animation         starts from  0  to  angle    you can name it as you want        deg  0   animate  deg  angle             duration  2000          step  function now                   in the step-callback  that is fired each step of the animation                  you can use the  now  paramter which contains the current                animation-position   0  up to  angle                elem css                   transform   rotate     now    deg                                         You can read more about the step-callback here  http   api jquery com animate  step  http   jsfiddle net UB2XR 23   And  btw  you don t need to prefix css3 transforms with jQuery 1 7   Update  You can wrap this in a jQuery-plugin to make your life a bit easier     fn animateRotate   function angle  duration  easing  complete      return this each function         var  elem     this           deg  0   animate  deg  angle           duration  duration        easing  easing        step  function now             elem css              transform   rotate     now    deg                               complete  complete      noop                       MyDiv2   animateRotate 90     http   jsbin com ofagog 2 edit  Update2  I optimized it a bit to make the order of easing  duration and complete insignificant     fn animateRotate   function angle  duration  easing  complete      var args     speed duration  easing  complete     var step   args step    return this each function i  e        args complete     proxy args complete  e       args step   function now            style e   transform    rotate     now    deg           if  step  return step apply e  arguments                  deg  0   animate  deg  angle   args              Update 2 1  Thanks to matteo who noted an issue with the this-context in the complete-callback  If fixed it by binding the callback with jQuery proxy on each node   I ve added the edition to the code before from Update 2   Update 2 2  This is a possible modification if you want to do something like toggle the rotation back and forth  I simply added a start parameter to the function and replaced this line      deg  start   animate  deg  angle   args     If anyone knows how to make this more generic for all use cases  whether or not they want to set a start degree  please make the appropriate edit     The Usage   is quite simple   Mainly you ve two ways to reach the desired result  But at the first  let s take a look on the arguments   jQuery fn animateRotate angle  duration  easing  complete   Except of  angle  are all of them optional and fallback to the default jQuery fn animate-properties   duration  400 easing   swing  complete  function         1st  This way is the short one  but looks a bit unclear the more arguments we pass in     node  animateRotate 90     node  animateRotate 90  function           node  animateRotate 90  1337   linear   function           2nd  I prefer to use objects if there are more than three arguments  so this syntax is my favorit     node  animateRotate 90      duration  1337    easing   linear     complete  function          step  function

User · Answer

this is my solution   var matrixRegex       matrix    s   s    -    0-9      0-9      e  -    0-9      gi   var getMatches   function string  regex        regex     regex   matrixRegex       var matches           var match      while  match   regex exec string             matches push match 1              return matches        cssHooks  rotation           get  function elem            var  elem     elem           var matrix   getMatches  elem css  transform             if  matrix length    6                return 0                    return Math atan2 parseFloat matrix 1    parseFloat matrix 0       180 Math PI               set  function elem  val           var  elem     elem           var deg   parseFloat val           if   isNaN deg                  elem css   transform   rotate     deg    deg                            cssNumber rotation   true    fx step rotation   function fx          cssHooks rotation set fx elem  fx now   fx unit        then you can use it in the default animate fkt     rotate to 90 deg cw    selector   animate   rotation  90        rotate to -90 deg ccw    selector   animate   rotation  -90        rotate 90 deg cw from current rotation    selector   animate   rotation     90         rotate 90 deg ccw from current rotation    selector   animate   rotation   - 90

[jquery] CSS rotation cross browser with jquery.animate()

Examples related to jquery

Examples related to css

Examples related to rotation

Examples related to jquery-animate