Rotar elementos con CSS3

Para rotar un elemento (texto, imágen, div, etc…) un determinado número de grados con CSS3, utilizamos la propiedad transform que contiene varios posibles parámetros (none, matrix, matrix3d, translate3d, translateX, translateY, translateZ, scale, scale3d, scaleX, scaleY, scaleZ, rotate, rotate3d, rotateX, rotateY, rotateZ, skew, skewX, skewY, perspective) del que seleccionamos rotateZ.

Con el parámetro rotateZ() podemos girar a derecha o izquierda el elemento según el ángulo equivalente al número de DEG (Degrees = grados sexagesimales) que insertemos.

EJEMPLO

Código CSS:

.rotar{
    transform: rotateZ(-20deg);
}

Código HMTL:

<div class="caja rotar"></div>

Recordar que aún la mayoria de navegadores no aceptan esta propiedad de css. Para visualizarla actualmente podeis usar Chrome, Safari), sino disponemos de estos navegadores este efecto lo podríamos realizar, pero usando javascript.