我試圖無限使用css3翻轉圖像，但代碼不能在Firefox中工作。有人可以指出我的問題。無限使用css3的翻轉圖像3d

<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>

來源

2014-05-25 PDS

這裏http://codepen.io/jjhesk/pen/lHdCA/ 搜索它...你會得到許多 – Ani

http://www.youtube.com/watch?v=6ObIO-SjMZc – Ani

他們都沒有無限旋轉。 – PDS

這裏小提琴：http://jsfiddle.net/9dqAK/7/

提示：您可以增加或減少使用-webkit-animation-duration屬性的速度。延遲越高，動畫越慢。

測試火狐。 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); 

    } 
}

來源

2014-05-25 15:41:21 Ani

您應該使用infinite如果你想讓它「翻轉」 contentiously。

Demo page和基本CSS：

div{ 
    animation: rotation 1s infinite linear; 
} 

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

注 - 你也應該使用autoprefixer

來源

2016-07-05 11:51:50 vsync

無限使用css3的翻轉圖像3d

回答

Demo page和基本CSS：

相關問題