CSS animation, rotate image 90 degrees using transform rotate
ID: 266
Category: CSS
Added: 20th of May 2021
Views: 5,027
I remember the days before CSS3, when the only way to create animated links, or what they used to call rollovers was to use Javascript.
If anyone remembers Macromedia Dreamweaver, which was a WYSIWYG HTML editor and how I first learned to created basic websites, it shipped with a function to create animated rollovers. It was quite involved, It wasn't pretty but it got the job done. If you wanted to create an animated arrow, you needed to created two .gif files.
Since the introduction of CSS3, it now even easier to create animated links.
With only a few lines of code and one .png image, combined with the CSS transform rotate property, we can rotate an arrow 90° when the users hovers over it.
Please copy and paste the code below. Right click and save as the arrow to your desktop.
.rotate {
width: 200px;
height: 200px;
margin: 0 auto;
transition: transform 1s; }
.rotate:hover{
transform: rotate(90deg);
}
</style>
<div class="rotate">
<a href="https://www.mycomputertips.co.uk"><img src="266a_arrow.png"> </div>
You can rotate the arrow to angle you like, by changing transform: rotate(90deg); in the css code.
Click here for a live example
