使用css3 3d的无限翻转图像

Question

我正在尝试使用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="slidecaption" style="width: 200px; height: 200px; border: 1px solid #000;"></div>

Answer 1

infinite如果您希望它有争议地“翻转”，则应该使用。

基本CSS：

div{ 
  animation: rotation 1s infinite linear; 
}

@keyframes rotation {
  100%{ transform:rotatey(360deg) }
}

演示：

div{ 
  animation: rotation 1s infinite linear; 
}

@keyframes rotation {
  100%{ transform:rotatey(360deg) }
}

html, body{ height:100%; }
body{ perspective:1000px; overflow:hidden; }

div{ 
  width: 100px;
  height: 200px;
  position: absolute;
  top:0; right:0; bottom:0; left:0;
  margin: auto;
  
  background: lightblue;
  animation: rotation 1s infinite linear; 
}

@keyframes rotation {
  100%{ transform:rotatey(360deg); }
}

注意- 您还应该使用autoprefixer

Answer 2

这里小提琴:http://jsfiddle.net/9dqAK/7/

提示:您可以使用-webkit-animation-duration属性来提高或降低速度.延迟越高,动画越慢.

在Firefox上测试过.chrome和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); 

   } 
}