![]() |
|||||
|
![]() ![]() ![]() |
Trasnformaciones 2D
Pues si CSS3 permite manipular los bloques tanto en dos como en tres dimensiones. Las acciones o métodos que nos permite CSS3 son
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 .caja{ 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 .caja{ 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 .caja{ 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 .caja{ 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()
|
|||
|