如何用CSS水平旋轉圖像

我需要水平旋轉圖像。通常我們使用gif來顯示正在加載的內容，例如AJAX請求。我發現this example但它顯示垂直旋轉。我想要一個像this one這樣的動畫。如何用CSS水平旋轉圖像

我怎麼用CSS和jQuery來做到這一點？

2013-11-26 Pablo Anaya

研究我找到了我的問題的答案。我們需要爲-webkit-transform CSS屬性使用rotateY屬性。

.imageRotateHorizontal{ 
    -moz-animation: spinHorizontal .8s infinite linear; 
    -o-animation: spinHorizontal .8s infinite linear;  
    -webkit-animation: spinHorizontal .8s infinite linear; 
    animation: spinHorizontal .8s infinite linear; 
} 

@keyframes spinHorizontal { 
    0% { transform: rotateY(0deg); } 
    100% { transform: rotateY(360deg); } 
} 

/* Vendor specific keyframes go here */

此外，我們必須定義一個合理時間的動畫。例如，我要將動畫設置爲0.8秒。這意味着我們的圖像將每0.8秒執行一次完整的旋轉。

我已經準備了的jsfiddle示出的完整代碼寬度的示例：http://jsfiddle.net/AB277/7/

來源

2013-11-26 13:03:18

'-webkit-transform'內部'-moz-keyframes'？看起來你不完全明白你在做什麼。標準屬性在哪裏？ – Pavlo

你是對的@Pavlo。這是一個錯誤的複製和粘貼在匆忙的早晨。對不起，並感謝您的意見。 –

謝謝@PabloAnaya發佈這個答案並提供jsfiddle！ – ComeOn

如何用CSS水平旋轉圖像

回答

相關問題