CSS3 Rotate Animation

Question

lt img class  image  src    alt    width  120  height  120  gt    Cannot get this animated image to work  it is supposed to do a 360 degrees rotation   I guess something s wrong with the CSS below  as it just stays still    image       float  left      margin  0 auto      position  absolute      top  50       left  50       width  120px      height  120px      margin-top  -60px      margin-left  -60px       -webkit-animation-name  spin      -webkit-animation-duration  4000ms      -webkit-animation-iteration-count  infinite      -webkit-animation-timing-function  linear       -moz-animation-name  spin      -moz-animation-duration  4000ms      -moz-animation-iteration-count  infinite      -moz-animation-timing-function  linear       -ms-animation-name  spin      -ms-animation-duration  4000ms      -ms-animation-iteration-count  infinite      -ms-animation-timing-function  linear       animation-name  spin      animation-duration  4000ms      animation-iteration-count  infinite      animation-timing-function  linear        -ms-keyframes spin            from                -ms-transform  rotate 0deg              to                -ms-transform  rotate 360deg                         -moz-keyframes spin            from                -moz-transform  rotate 0deg              to                -moz-transform  rotate 360deg                         -webkit-keyframes spin            from                -webkit-transform  rotate 0deg              to                -webkit-transform  rotate 360deg                         keyframes spin            from                transform  rotate 0deg              to                transform  rotate 360deg

User · Accepted Answer

Here is a demo  The correct animation CSS    x000D   x000D   image   x000D      position  absolute  x000D      top  50   x000D      left  50   x000D      width  120px  x000D      height  120px  x000D      margin -60px 0 0 -60px  x000D      -webkit-animation spin 4s linear infinite  x000D      -moz-animation spin 4s linear infinite  x000D      animation spin 4s linear infinite  x000D    x000D   -moz-keyframes spin   100    -moz-transform  rotate 360deg       x000D   -webkit-keyframes spin   100    -webkit-transform  rotate 360deg       x000D   keyframes spin   100    -webkit-transform  rotate 360deg   transform rotate 360deg       x000D   lt img class  image  src  http   i stack imgur com pC1Tv jpg  alt    width  120  height  120  gt  x000D   x000D   x000D      Some notes on your code    You ve nested the keyframes inside the  image rule  and that s incorrect float left won t work on absolutely positioned elements Have a look at caniuse  IE10 doesn t need the -ms- prefix

User · Answer

try this easy    x000D   x000D    x000D    btn-circle span   x000D       top  0  x000D      x000D        position  absolute  x000D       font-size  18px  x000D         text-align  center  x000D      text-decoration  none  x000D        -webkit-animation spin 4s linear infinite  x000D      -moz-animation spin 4s linear infinite  x000D      animation spin 4s linear infinite  x000D    x000D   x000D   btn-circle span  hover   x000D   color  silver  x000D    x000D   x000D   x000D     rotate 360 key for refresh btn    x000D   -moz-keyframes spin   100    -moz-transform  rotate 360deg       x000D   -webkit-keyframes spin   100    -webkit-transform  rotate 360deg       x000D   keyframes spin   100    -webkit-transform  rotate 360deg   transform rotate 360deg        x000D    lt button type  button  class  btn btn-success btn-circle   gt  lt span class  glyphicon  gt  amp  x21bb  lt  span gt  lt  button gt  x000D   x000D   x000D

User · Answer

I have a rotating image using the same thing as you    knoop1 img      position absolute      width 114px      height 114px      top 400px      margin 0 auto      margin-left -195px      z-index 0       -webkit-transition-duration  0 8s      -moz-transition-duration  0 8s      -o-transition-duration  0 8s      transition-duration  0 8s       -webkit-transition-property  -webkit-transform      -moz-transition-property  -moz-transform      -o-transition-property  -o-transform       transition-property  transform        overflow hidden      knoop1 hover img      -webkit-transform rotate 360deg       -moz-transform rotate 360deg        -o-transform rotate 360deg

User · Answer

Here this should help you  The below jsfiddle link will help you understand how to rotate a image I used the same one to rotate the dial of a clock   http   jsfiddle net xw89p   var rotation   function            image   rotate         angle 0         animateTo 360         callback  rotation        easing  function  x t b c d                    return c  t d  b                   rotation      Where        t  current time         b  begInnIng value         c  change In value         d  duration         x  unused  No easing  linear easing      function x  t  b  c  d    return b  t d  c

User · Answer

if you want to flip image you can use it    image      width  100       -webkit-animation spin 3s linear infinite      -moz-animation spin 3s linear infinite      animation spin 3s linear infinite     -moz-keyframes spin   50    -moz-transform  rotateY 90deg        -webkit-keyframes spin   50    -webkit-transform  rotateY 90deg        keyframes spin   50    -webkit-transform  rotateY 90deg   transform rotateY 90deg

User · Answer

To achieve the 360 degree rotation   here is the Working Solution   The HTML    lt img class  image  src  your-image png  gt    The CSS    image       overflow  hidden      transition-duration  0 8s      transition-property  transform     image hover       transform  rotate 360deg       -webkit-transform  rotate 360deg       You have to hover on the image and you will get the 360 degree rotation effect   PS  Add a -webkit- extension for it to work on chrome and other webkit browers  You can check the updated fiddle for webkit HERE

[image] CSS3 Rotate Animation

Examples related to image

Examples related to css

Examples related to animation

Examples related to rotation