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: <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 propiedades transform el último sobreescribirá al primero y por tanto el primero será ignorado/sobrescrito. Las funciones de transformación deben ir separados por un espacio. Además, es que el orden de dichas transformaciones.

Transform-origin

Antes de empezar, hay una propiedad clave: transform-origin. Esta propiedad define el punto sobre el cual se aplica la transformación (como poner una chincheta una longitud/latitud en un mapa). Por defecto, es 50% 50% (el centro exacto del elemento).

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. skew(anguloX, anguloY). Esta función sesga o inclina el elemento. Es menos común, pero útil para efectos de distorsión.

Transformaciones a 3D

Aquí es donde se añade el eje Z, que representa la profundidad (más cerca o más lejos del espectador). Como hemos visto, hay muchas funciones que nos dan la posibilidad de realizar transformaciones 3d (otras no, como es el caso de las deformaciones).

Perspectiva

Para que el 3D parezca 3D, el navegador necesita saber "dónde está el ojo" del espectador. Esto se hace con la propiedad perspective.

Translate3d(x,y,z)

Usan los mismos conceptos que el 2D, pero añadiendo el eje Z.

rotate3d(x, y, z, angle)

En este caso, es mucho más fácil usar las funciones individuales:

scale3d(x, y, z)

transform: scaleZ(3); (Estira el elemento 3 veces en profundidad. Solo es visible si el elemento ya está girado).