Índice

Transformaciones

El módulo CSS Transforms Module Level 1 nos permite realizar transformaciones sobre los diversos elementos de la página HTML. Este módulo está todavía en estado Working Draft a 26 de noviembre de 2013: http://www.w3.org/TR/css-transforms-1/

Se trata de una propiedad CSS3 con unos resultados, cuando menos, espectaculares. En efecto, sus posibilidades rompen en cierto modo con la rigidez del diseño de páginas web. Esta propiedad permite aplicar distintas transformaciones sobre un elemento, como por ejemplo una rotación, un cambio de escala, un zoom o una deformación oblicua. Unida a las transiciones (véase el punto siguiente), juntas forman un binomio que promete modificar en profundidad la visualización de los sitios web del futuro.

transform:

rotate(ángulo), rotate3d(ángulo), rotateX(ángulo), rotateY(ángulo), rotateZ(ángulo), scale(número), scale3d(número), scaleX(número), scaleY(número), scaleZ(número), skew(ángulo), skewX(ángulo), skewY(ángulo), skewZ(ángulo), translate(longitud), translate3d(longitud), translateX (longitud), translateY(longitud), translateZ(longitud)

La propiedad transform la reconocen perfectamente los navegadores modernos. He aquí la matriz de compatibilidad de Can I use:

images/c22-001.png

Veamos los distintos parámetros de esta propiedad transform.

Rotación

La rotación de un elemento se obtiene mediante el parámetro rotate(ángulo), donde ángulo ...