无限翻转图像使用css3 3d [英] infinite Flip image using css3 3d

问题描述

我试图使用css3无限地翻转图像，但是代码在Firefox中不工作。

 < 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 =slidecaptionstyle =width：200px; height：200px; border：1px solid＃000;>< / div>感谢
解决方案   div> 
此处小提琴： http://jsfiddle.net/9dqAK/7 /  
 
 
 
提示：您可以使用 -webkit-animation  属性来提高或降低速度。更高的延迟，更慢的动画。
 
 
 
在 Firefox 上测试。  chrome 和 IE11 。
 
 
 
  HTML  
 
 < img id =slidecaptionsrc =http://placehold.it/200x200alt =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和Opera浏览器* / 
 @ -webkit-keyframes spinner {
从
 {
 -webkit-transform：rotateY（0deg）; 
} 
 to {
 -webkit-transform：rotateY（-360deg）; 
} 
} 
 / *所有其他浏览器* / 
 @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）; 
 
} 
} 
  
 
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
解决方案
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); 

   } 
}


                        
这篇关于无限翻转图像使用css3 3d的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！