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