PDS PDS - 4 months ago 12
HTML Question

infinite Flip image using css3 3d

I'm trying to flip an image infinitely using css3, but the code is not working in firefox. Can some point me the issue.

<style>
#slidecaption {
-webkit-animation: rotation 1s infinite linear;
-moz-animation: rotation 1s infinite linear;
-ms-animation: rotation 1s infinite linear;
-o-animation: rotation 1s infinite linear;
animation: rotation 1s infinite linear;
}

@-webkit-keyframes rotation {
from {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}

to {
-webkit-transform: rotateY(359deg);
-moz-transform: rotateY(359deg);
-ms-transform: rotateY(359deg);
-o-transform: rotateY(359deg);
transform: rrotateY(359deg);
}
}
</style>

<div id="slidecaption" style="width: 200px; height: 200px; border: 1px solid #000;"></div>


Thanks

Ani Ani
Answer

Here Fiddle: http://jsfiddle.net/9dqAK/7/

TIP: you can increase or decrease the speed using -webkit-animation-duration property. Higher the delay, slower the animation.

Tested on Firefox. chrome and IE11.

HTML:

<img id="slidecaption" src="http://placehold.it/200x200" alt="placeholder" />

CSS

#slidecaption {
   -webkit-animation-name: spinner; 
  -webkit-animation-timing-function: linear; 
  -webkit-animation-iteration-count: infinite; 
  -webkit-animation-duration: 2s; 
  animation-name: spinner; 
  animation-timing-function: linear; 
  animation-iteration-count: infinite; 
  animation-duration: 2s; 
  -webkit-transform-style: preserve-3d; 
  -moz-transform-style: preserve-3d; 
  -ms-transform-style: preserve-3d; 
  transform-style: preserve-3d;
}


/* WebKit and Opera browsers */ 
@-webkit-keyframes spinner { 
  from 
  { 
    -webkit-transform: rotateY(0deg); 
  } 
  to { 
    -webkit-transform: rotateY(-360deg); 
  } 
} 
/* all other browsers */ 
@keyframes spinner { 
   from { 
    -moz-transform: rotateY(0deg); 
    -ms-transform: rotateY(0deg); 
    transform: rotateY(0deg); 
   } 
   to 
   { 
    -moz-transform: rotateY(-360deg); 
    -ms-transform: rotateY(-360deg); 
    transform: rotateY(-360deg); 

   } 
}
Comments