css - 每次点击旋转图像180度（CSS动画）

我已经创建了一些代码，它会在第一次点击时将图像旋转180度。这是代码：

<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做到这一点吗？请解决我的问题

每次点击旋转图像180度（CSS动画）

1 个答案: