每次点击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动画）

回答

相关问题