Firstly, let's demonstrate that this task is achievable.
Now that we've established that, let's delve into the details and show you how to accomplish it.
Begin by utilizing animation to create animated effects and achieve the desired rotation effect. Simply using a transition won't suffice because transitioning between 0 and 360 doesn't result in any visible change. Therefore, animate your properties from one value to another upon hover. Your code snippet will resemble the following:
@keyframes spin {
from { transform: scale(.1,.1) skew(0deg) rotate(0deg); }
to { transform: scale(1,1) skew(0deg) rotate(360deg); }
}
.myMsg:hover {
animation: spin 1s forwards;
}
The @keyframes declaration specifies the animation sequence, defining the transformation from initial properties to final ones. Subsequently, assign your :hover pseudo-class to trigger the specified animation. The essential properties for the animation include animation-name, animation-duration, and animation-fill-mode (indicating that it should retain the final state properties when the animation concludes). Don't forget about Webkit prefixes for compatibility.
Furthermore, I applied a transition: transform 1s; on the .myMsg class to ensure smooth animation upon mouse exit. Nevertheless, note that Webkit might exhibit slight inconsistency and choppiness due to interaction nuances between the two animations. It's worth acknowledging that with experimental features like this, results may vary.
A couple of additional points to consider:
- Your CSS requires refinement for cross-browser compatibility
- You're initially defining one transform property and then promptly overriding it. All transforms must be grouped within the same declaration – they cannot be separated as observed