How to rotate an image using CSS3?

There is a trend that has been going on for a while on some website that spins or rotate images and icons by hovering your mouse over the image or the icon, few people have asked me how is it done using css3. Well you can do it using CSS3’s transform: rotate(xdeg) property which will control the number of degrees, CW, CCW etc …

–> View the [live demo]

CSS used