Category: CSS

Added: 20th of May 2021

Viewed: 318 times

CSS animation, rotate image 90 degrees using transform rotate

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.



<style>
.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

Other Tips & Tutorials

CSS

CSS keyframes animation, move text around the screen in a square path

Posted: 2nd of June 2021

Views: 298

CSS

CSS animation, rotate image 90 degrees using transform rotate

Posted: 20th of May 2021

Views: 318

CSS

Alternating div background colours using CSS

Posted: 9th of April 2021

Views: 436

CSS

How I created rounded boxes in the early days of the web using HTML tables, .gifs and Photoshop

Posted: 6th of March 2021

Views: 501

CSS

Using CSS grids to create a simple grid layout

Posted: 10th of April 2020

Views: 982

CSS

Simple CSS responsive menu for websites and mobile devices

Posted: 26th of January 2016

Views: 1721