Girar imágenes

Hace unos días me preguntaba Graciela por el efecto que tiene la imagen de la sidebar "Blog de la semana" le respondí pero me pareció que un comentario no da para ejemplos y como también me preguntan por el efecto de la arroba del logo y es el mismo  pues  aquí va una respuesta más detallada.

(15deg)

(90deg)

(360deg)

El HTML lo añadimos donde vamos a mostrar el efecto de la siguiente forma:

<div class="imagerotate">
<a href="URL-ENLACE"><img alt="" src="URL-IMAGEN" /></a>
</div>

Si no queremos que la imagen sea un enlace añadimos sólo el código para imagen y la clase imagerotate.
<div class="imagerotate">
<img src="URL-IMAGEN"/>
</div>

Y los estilos justo antes de ]]></b:skin> 

.imagerotate img {

-moz-border-radius:5px;

-moz-transition: -moz-transform 1s ease 0s;

background:#B292A9 !important;

border: 1px solid #ffffff !important;

border-radius: 5px 5px 5px 5px;

height: 150px; margin: 5px;

padding: 0px;

position: relative;

width: 220px;

}

.imagerotate img:hover {

background:#AD184E !important;

-moz-transform:rotate(5deg);

-o-transform:rotate(5deg);

-webkit-transform:rotate(5deg);

-ms-transform:rotate(15deg);

}

Según deseamos que el movimiento de un giro mayor aumentamos o disminuimos el valor de  (deg)
La referencia de esta entrada es de Vagabundia que nos muestra otras transformaciones con CSS