Pues si CSS3 permite manipular los bloques tanto en dos como en tres dimensiones. Las acciones o métodos que nos permite CSS3 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....

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

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

rotate()

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

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

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

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

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

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()

 

arriba