Pure CSS3 - Rotate Thumbnails
Learn how to rotate thumbnails or images with pure CSS. It’s a very simple effect that adds visual personality to your overall design or User Experience. If you are achieving this effect using a different technique, then you are working unnecessarily hard! Time to learn how to do it right.

Note that this tutorial is compatible with modern browsers only!

CSS3,pure CSS image rotate on hover

See HTML code and CSS break down

I am not including a copy-based field on purpose. You can easily reproduce this technique yourself so you will see how quick and easy it is compared to another techniques. This tutorial is just to show you one of many CSS3 benefits. Simplicity always wins!

HTML

HTML source code

There is one disadvantage and that is that this technique doesn’t work in older browsers. I am sure there is a way around it, how to hack the CSS and to make it work, but I have dedicated this section to CSS3 only and I want to enjoy its benefits, therefore I am not going to make it happen. I would rather spend time on experimenting with the future rather than with the past. But if you want to play around, please drop me a line, as I would love to see your piece of art.

CSS3

CSS source code