Transformaciones 2D

Pues si CSS3 permite manipular los bloques tanto en dos como en tres dimensiones. Las fnciones CSS que nos permite hacerlo son

  • translate()
  • rotate()
  • scale()
  • skew()
  • matrix()

Acciones que luego podremos utilizar en las animaciones, donde realmente tienen sentido, así como en un entorno interactivo con el usuario o en webs muy dinámicas....

Desplazar un elemento: Translate()

Nos permite mover un bloque la distancia horizontal y vertical que le indiquemos en los argumentos. Pulsa el recuadro para ver como se desplaza hacia la derecha

.caja{

transform:translate(7deg);

-ms-transform:rotate(7deg); /* IE 9 */

-webkit-transform:rotate(7deg);

}

Existen también un translateX para actuar en horizontal y translateY para desplazar en vertical

Girar un elmento: rotate()

Esta otra caja puede girar, observa como al pulsar gira sobre su centro

.caja{

transform:rotate(30deg);

-ms-transform:rotate(7deg); /* IE 9 */

-webkit-transform:rotate(7deg);

}

El ángulo lo acompañas de la unidad (deg para grados o rad para radianes).

Cambiar el tamaño: scale()

Pero también es posible modificar el tamaño mediante este valor en transform. Este escalado afecta a la caja y a su contenido

.caja{

transform:scale(0.5);

-ms-transform:scale(0.5);

-webkit-transform:scale(0.5);

}

Existen también un scaleX para actuar sobre el ancho y scaleY solo sobre el alto

Inclinar un bloque: skew()

Este valor de la propiedad transfom lo que hace es deformar el bloque, girando los lados horizontal o vertical o ambos a la vez. Si pulsas sobre el cuadro verás que inclina los lados

.caja{

transform:skew(25deg);

-ms-transform:skew(25deg);

-webkit-transform:skew(25deg);

}

Puede llevar dos argumentos para actuar en los bordes laterales y en los superior e inferior. También puede actuar sobre los lados verticales u horizntales por separado usando skewX() o skewY()

lateralApdo