La nueva propiedad transform de CSS3

Si en otros post hemos visto nuevos efectos de CSS3 como las animaciones o transiciones, hoy hablaremos de las transformaciones. Para mí otra de las mejores novedades que ofrece la última versión de CSS

. Gracias a estas propiedades conseguimos efectos muy chulos con poco código y sin tener que utilizar framework como jQuery. Con la propiedad transform tenemos 4 efectos distintos: rotación, inclinación, escalado o traslado. Explico cada uno de ellos:

ROTATE: Se indica en grados la inclinación en grados (deg) la rotación del elemento.
SKEW: Se indica en grados la inclinación del elemento en X (horizontal) e Y (vertical).
SCALE: Cambiamos el tamaño en escala respecto al tamaño del elemento. Se mide en tantos por uno. Osea que (0.5,0.5) se escala a la mitad. Scale(2,2) se escala al doble del tamaño.
TRANSLATE: Se indica en px el desplazamiento en horizontal y en vertical.

Un ejemplo de cada:

.elemento {
 transform: rotate(45deg);
 transform: skew(20deg,0deg);
 transform: scale(0.5,0.5);
 transform: translate(20px,0px);
}

También podemos utilizar un shorthand con los 4 efectos a la vez sin utilizar comas de separación.

.elemento {
 transform: rotate(45deg) skew(20deg,10deg) scale(2,1.5) translate(10px,10px);
}