infinite Flip image using css3 3d

Question

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

```

Accepted 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);

} 
}
```

infinite Flip image using css3 3d

Solution

Problem