Transformaciones
Transformaciones 2D/3D
Las transformaciones de CSS nos permite realizar efectos visuales 2Dy 3D. Con ellas podemos mover elementos, rotarlos, hacerlos más o menos grandes, etc.
La propiedad transform permite transformar un elemento de forma visual, pasándole como parámetro la función que queremos aplicar. La sintaxis de esta propiedad es: transform: none | <lista de transformaciones>;
Por ejemplo, si queremos escalar una imagen (0.5) y transladarla 30px en el ejeX y 20px en el ejeY, sería:
Es importante tener en cuenta, que si ponemos dos transform el último sobreescribirá al primero y por tanto el primero será ignorado. Las funciones de transformación deben ir separados por un espacio. Además, es que el orden de dichas transformaciones.
Una de las propiedades que tiene transform es transform-origin, que nos permite cambiar el punto de origen de una transformación. Para ello le indicaremos la posiciónX posiciónY.
Translaciones
La función de translación consiste en mover un elemento de un lugar a otro. La sintaxis de la propiedad translate es la distancia de x e y (opcionalmente z). Si queremos hacer una translación en 3D, debemos indicar también la distancia en el eje Z. Veamos un ejemplo:
Como vemos estamos usando la función translateX(size), pero podemos usar también translateY(size), translateZ(size), translate(x, y), translate(X), translate3d(x, y, ,z)
Rotaciones
Una rotación consiste en girar un elemento en un eje específico. Para ello usaremos la propiedad transform de css y la función rotate, donde del mismo modo que con translate podemos emplear las funciones: rotateX(angleX), rotateY(angleY), rotateZ(angleZ), rotate3d(x, y, z, grados) .
En las nuevas versiones de los navegadores, tenemos la propiedad rotate, la cual nos permite ahorrarnos tener que usar transform para obtener el mismo resultado. Veamos qué parámetros recibe esta propiedad y cómo funciona. rotate: none | numX numY numZ angle | eje angle | angle. Como vemos, podemos pasarle un parámetro a esta propiedad para indicarle que no se rotará (none) o un ángulo que lo que hará sería rotar sobre sí mismo (mismo efecto que si hiciéramos un rotateZ), cuando le pasamos dos parámetros es porque le indicamos el eje sobre el que queremos que rote, y si le indicamos cuatro parámetros es porque vamos a decirle mediante un 0 ó 1 si queremos que sobre ese eje rote y qué grados. La función rotate3d(x, y, z, grados) equivale a este último caso, es decir, rotate: numX numY numZ angle.Veamos unos ejemplos:
Del mismo modo que en las translaciones, tenemos la posibilidad de rotar un elemento sobre el eje Z: rotate3d(angle, angle, angle, angle).
Escalado
Cuando queremos aumentar o disminuir el tamaño de una imagen tenemos la función scale que nos permite modificar el tamaño de un elemento. Las distintas funciones de escalado que tenemos son: scaleX(num), scaleY(num), scaleZ(num), scale(numX, numY), scale(numX), scale3d(numX, numY, numZ) .Veamos un ejemplo, donde duplicamos anchura y reducimos a la mitad la altura:
Como pasa con rotate, tenemos la propiedad scale en los nuevos navegadores de forma que no es necesario usar la propiedad transform. La propiedad scale acepta los siguientes valores:scale: none | numXY | numX numY| numX numY numZ. Donde los será none si no queremos que se escale, un número que será una escala para el ejeX y para el ejeY, cuando damos dos valores será la escala que coja al ejeX, y ejeY, y cuando damos tres valores será el valor de escalar cada eje.
Deformaciones
Si queremos retorcer o inclinar un elemento 2d tenemos la posibilidad de usar la función skew. skewX(anguloX), skewY(anguloY), debemos tener cuidado porque la función skew como tal está marcada como obsoleta, por tanto, mejor usarla por separado cada eje.
Transformaciones a 3D
Como hemos visto, hay muchas funciones que nos dan la posibilidad de realizar transformaciones 3d (otras no, como es el caso de las deformaciones).
Antes de utilizar las transformaciones 3d, es importante conocer alguna de las propiedades que han sido derivadas de las transformaciones como es transform-style: flat | preserve-3d y transform-origin: posX posY posZ.
Mediante la función transform-style podemos modificar el tratamiento de los elementos hijos, donde por defecto está establecido a flat (es decir, los trata como elementos 2d), si queremos que los trate como elementos 3d debemos darle el valor preserve-3d. La función transform-origin cambia el punto de origen del elemento en una transformación.