CSS圖像旋轉轉換

我有這個jsfiddle，我認爲它會使這個圖像不斷旋轉，但它不會。CSS圖像旋轉轉換

的HTML使用：

<img class="rotate" src="http://www.arcelormittal.com/distributionsolutions/content/images/reload_captcha.png" />

CSS的使用：

.rotate{ 
    -webkit-transition-duration: 0.8s; 
    -moz-transition-duration: 0.8s; 
    -o-transition-duration: 0.8s; 
    transition-duration: 0.8s; 
    -webkit-transition-property: -webkit-transform; 
    -moz-transition-property: -moz-transform; 
    -o-transition-property: -o-transform; 
    transition-property: transform; 

    -webkit-transform:rotate(360deg); 
    -moz-transform:rotate(360deg); 
    -o-transform:rotate(360deg); 
    transform:rotate(360deg); 
}

爲什麼沒有圖像不停旋轉？

來源

2013-07-12 Get Off My Lawn

你需要使用動畫，因爲它沒有開始和結束要從其過渡：

.rotate { 
    -webkit-animation: spin .8s infinite linear; 
    animation: spin .8s infinite linear; 
} 
@-webkit-keyframes spin { 
    100% { -webkit-transform: rotate(360deg); } 
} 
@-moz-keyframes spin { 
    100% { -moz-transform: rotate(360deg); } 
} 
@keyframes spin { 
    100% { 
     -moz-transform:rotate(360deg); 
     -o-transform:rotate(360deg); 
     transform:rotate(360deg); 
    } 
}

來源

2013-07-12 16:15:11 kalley

基本上是一回事，只是刪除懸停的http：//計算器.com /問題/ 7988962/continuous-css-rotation-animation-on-hover-animated-back-to-0deg-on-hover-out –

甜蜜的作品！謝謝！ –

已更新，以解決我的語法錯誤（它不是'@ -keyframes' ...） – kalley

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
     div 
     { 
      width:200px; 
      height:100px; 
      margin-top:100px; 
      background-color:yellow; 
      /* Rotate div */ 
      transform:rotate(90deg); 
      -ms-transform:rotate(90deg); /* IE 9 */ 
      -webkit-transform:rotate(90deg); /* Opera, Chrome, and Safari */ 
     } 
    </style> 
</head> 
<body> 
    <div><img src="http://www.rltech.co.in/01/images/rllogo.png"/></div> 
</body> 
</html>

來源

2014-05-14 12:26:34 user3636631

請在您的答案中添加一些內容。只有代碼答案不值得讚賞。 –

CSS圖像旋轉轉換

回答

相關問題