Currently, I have an element set to rotate 45 degrees when the website is displayed, and this functionality is working as expected. However, I am now looking to enhance it further by making the element rotate an additional 45 degrees every time it is hovered over. It is important that once the rotation occurs on hover, the element should not revert back to its original position. How can I achieve this using CSS animations?
I've put together a JSFiddle demo that demonstrates the initial animation, but I am facing challenges in getting the element to rotate another 45 degrees upon hover.
Here is my HTML structure:
<img class="image" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">
And here is snippet of my current CSS code:
.image {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin:-60px 0 0 -60px;
-webkit-animation:spin 0.6s linear;
-moz-animation:spin 0.6s linear;
animation:spin 0.6s linear;
animation-fill-mode: forwards;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(45deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(45deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(45deg); transform:rotate(45deg); } }