At this link, you can find an example of using CSS transform to rotate links on hover, but I'm having trouble getting it to work as expected.
<!DOCTYPE html>
<html>
<head>
<style>
a:hover{
font-size:45px;
-webkit-transform:rotate(5deg);
}
</style>
</head>
<body>
<a href="http://davidwalsh.name/css-transformations" target="_blank">text</a>
</body>
</html>
Although the link changes its font size when hovered over, it doesn't rotate as intended. I've tried using -webkit-transform in Google Chrome, but no luck.
You can see what I'm attempting to achieve in this example: http://davidwalsh.name/demo/cpojer-links.php
I also attempted this:
a:link:hover{
font-size:45px;
-webkit-transform:rotate(5deg);
}
but unfortunately, that didn't work either.
I did manage to make it "work" by enclosing the link in an 'li' and using li:hover, but that's not the desired outcome.
Any thoughts or suggestions?