每次點擊180度旋轉圖像（CSS動畫）

我已經創建了一些代碼，它會在第一次點擊時將圖像旋轉180度。下面是代碼：每次點擊180度旋轉圖像（CSS動畫）

<HTML> 
<head> 
<style> 
#loading:hover { 
     -webkit-animation: rotation 0.5s linear; 
} 

@-webkit-keyframes rotation { 
     from { 
       -webkit-transform: rotate(0deg); 
     } 
     to { 
       -webkit-transform: rotate(180deg); 
     } 
} 
</style> 
</head> 
<body> 
<img id="loading" src="https://dl.dropboxusercontent.com/1/view/ytbvxuhzbxjqldt/Apps/Pancake.io/help/img.png"> 
</body> 
</HTML>

我想將圖像旋轉180度在第一次點擊左，然後在接下來的（秒）點擊，旋轉反向（180度右）在第三點擊向左旋轉和第四次點擊，向右旋轉。 轉發無限旋轉和反轉模式。我可以通過CSS來做到這一點嗎？請解決我的問題

來源

2017-07-15 user8312352

我有一個項目做前15/7/2017年，所以有人請幫助我迅速 – user8312352

只有CSS，我認爲你不能。你需要一些與JavaScript的邏輯，你的代碼也是當鼠標懸停在圖像上，而不是當它點擊時。 –

@PabloCesarCordovaMorales此評論不能成爲答案。是否可以通過CSS或JavaScript製作動畫，請爲我的問題提供一個代碼，在您的評論 – user8312352

hope this will help as you can see just change the hover to active 
<HTML> 
<head> 
<style> 
#loading:active { 
     -webkit-animation: rotation 0.5s linear; 
} 

@-webkit-keyframes rotation { 
     from { 
       -webkit-transform: rotate(0deg); 
     } 
     to { 
       -webkit-transform: rotate(180deg); 
     } 
} 
</style> 
</head> 
<body> 
<img id="loading" src="https://dl.dropboxusercontent.com/1/view/ytbvxuhzbxjqldt/Apps/Pancake.io/help/img.png"> 
</body> 
</HTML>

來源

2017-07-16 16:15:16 Yusif

每次點擊180度旋轉圖像（CSS動畫）

回答

相關問題