Las transformaciones en CSS son una poderosa herramienta que permite modificar la apariencia de los elementos en un documento HTML. Se puede desplazar, rotar, escalar y deformar elementos con el fin de crear efectos visuales más bonitos, lo cual permite mejorar la experiencia del usuario.
Para transformar elementos se utiliza principalmente la propiedad CSS transform, que permite realizar tanto transformaciones en 2D como en 3D. Como valor acepta diferentes funciones que permiten hacer varios efectos visuales.
| Transformación | Descripción |
|---|---|
| Traslación | Desplaza un objeto de un lugar a otro. |
| Rotación | Gira un objeto desde un punto de rotación. |
| Escalado | Modifica el tamaño de un objeto. |
| Deformación | Inclina objetos a partir de un ángulo. |
| Perspectiva | Simula la profundidad en un objeto. |
| Matrices | Transforma arbitrariamente un objeto. |
Además de la propiedad transform, CSS también provee algunas propiedades específicas para personalizar las transformaciones.
| Propiedad | Descripción |
|---|---|
transform-origin | Cambia el origen de las transformaciones. |
transform-style | Modifica el tipo de transformación (2D o 3D). |
Una de las grandes ventajas es que podemos combinar múltiples transformaciones y animarlas utilizando el propio CSS o con ayuda de JavaScript (JS). Además, son compatibles con la mayoría de los navegadores web modernos, lo que garantiza una experiencia de usuario consistente entre varios dispositivos.
Traslación
La traslación o desplazamiento de elementos se realiza mediante una serie de funciones que permiten mover un elemento tanto a nivel bidimensional (ejes horizontal y vertical) como a nivel tridimensional (profundidad).
Para trasladar un elemento podemos usar la función translate(). Por ejemplo, vamos a crear un elemento cuadrado, y en esta función indicaremos un desplazamiento de 20 píxeles en horizontal y 5 píxeles en vertical.
Código CSS:
.trasladar {
background: teal;
height: 40px;
transform: translate(20px, 10px);
width: 40px;
}
Resultado:
Aprende con más detalle la traslación de elementos con CSS.
Rotación
En CSS también existe una serie de funciones específicas que permiten rotar elementos HTML en varios ejes; por lo que se pueden rotar tanto en dos dimensiones (2D) como en tres dimensiones (3D).
Por ejemplo, podemos usar la función rotate() para rotar un elemento, y como parámetro de esta función se indica los grados de rotación deseados. Vamos a crear un elemento <div> de forma cuadrada y lo rotamos 30 grados.
Código CSS:
.rotar {
background: teal;
height: 40px;
transform: rotate(30deg);
width: 40px;
}
Resultado:
Aprende con más detalle la rotación de elementos con CSS.
Escalado
Otra característica interesante de las transformaciones en CSS es que también es posible realizar un escalado de elementos HTML. También existe funciones CSS que permiten escalar elementos en horizontal, en vertical y en 3D.
En este ejemplo vamos a escalar un cuadrado para que su tamaño sea de un 80% del total. Vamos a usar la función scale(), y como parámetro indicaremos el valor 0.8, equivalente al 80% pero en tanto por uno.
Código CSS:
.escalar {
background: teal;
height: 40px;
transform: scale(0.8);
width: 40px;
}
Resultado:
Aprende con más detalle el escalado de elementos con CSS.
Deformación
Más allá de las tres herramientas de transformación básicas como son la traslación, la rotación y el escalado, con CSS también es posible crear una deformación del elemento HTML. No obstante, solo se puede crear un sesgo en 2D.
En el siguiente ejemplo vamos a deformar un cuadrado en el eje horizontal, y para ellos usaremos la función skewX(). El parámetro de esta función debe ser una unidad de ángulo, y asignaremos un valor de 20deg.
Código CSS:
.deformar {
background: teal;
height: 40px;
transform: skewX(20deg);
width: 40px;
}
Resultado:
Aprende con más detalle la deformación de elementos con CSS.
Perspectiva
Cuando se trabaja con herramientas de transformación, puede ser necesario crear perspectivas para simular la profundidad y así mejorar la percepción tridimensional. Por tanto, CSS también ayuda a crear efectos visuales más realistas.
Vamos a ver un ejemplo de perspectiva. Si tenemos un cuadrado y lo rotamos 45 grados por el eje vertical, veremos la arista más cercana más larga, y la arista más lejana más estrecha. Usaremos la función perspective() para definir la distancia de 60 píxeles entre el usuario y el plano Z, equivalente a 0.
Código CSS:
.perspectiva {
background: teal;
height: 40px;
transform: perspective(60px) rotateY(45deg);
width: 40px;
}
Resultado:
Aprende con más detalle la creación de perspectivas con CSS.
Matrices
En CSS existe herramientas que permiten aplicar transformaciones arbitrarias a los elementos HTML. Pueden parecer complejas, pero son muy flexibles y brindan un control muy preciso sobre la posición, la rotación, el escalado y la perspectiva de los elementos que queramos transformar. Se trata de dos funciones para crear matrices de transformación: matrix() para 2D y matrix3d() para 3D.
A continuación vamos a crear un ejemplo con una matriz de transformación en 2D. Esta función admite seis parámetros referentes a las siguientes operaciones: escalado en X, deformación en Y, deformación en X, escalado en Y, traslación en X y traslación en Y. El orden indicado debe ser tenido en cuenta.
Código CSS:
.matriz {
background: teal;
height: 40px;
transform: matrix(0.7, 0.2, 0.2, 0.7, 0, 0);
width: 40px;
}
Resultado:
Aprende con más detalle la creación de matrices con CSS.
Múltiples transformaciones
La propiedad CSS transform permite aplicar múltiples transformaciones a un mismo elemento. Se deben introducir como valor separándolas con un espacio en blanco. Hay que tener en cuenta que se aplicarán según el orden que se indique; esto significa que el orden altera el resultado final.
Imaginemos que queremos realizar una traslación y una rotación. Si primero movemos el objeto a la derecha, se moverá horizontalmente; y cuando lo rotemos, girará sobre su centro en esa posición desplazada.
Pero si, por el contrario, primero lo rotamos 45 grados, sus ejes quedarán inclinados. Entonces, al querer desplazarlo no se moverá en horizontal, sino que se desplazará, en este caso hipotético, hacia la esquina inferior derecha.
En el ejemplo siguiente vamos a crear otro elemento cuadrado, pero lo vamos a rotar 45 grados y le aplicaremos un factor de escalado del 50% para reducir su tamaño a la mitad. Pero se podría usar muchas más funciones a la vez.
Código CSS:
.multiples {
background: teal;
height: 40px;
transform: rotate(45deg) scale(0.5);
width: 40px;
}
Resultado:
La propiedad ‘transform-origin’
La propiedad CSS transform-origin permite modificar el punto de origen de las transformaciones. Esta propiedad admite tres parámetros como valor, relativos al plano horizontal (X), al plano vertical (Y) y al plano de la profundidad (Z), en caso de trabajar en 3D. Su valor inicial y por defecto es 50% 50% 0.
Los valores pueden ser introducidos como porcentaje o mediante valores absolutos en unidades de longitud. También se puede usar palabras clave para referirse a los extremos laterales (left y right), verticales (top y bottom) y centrado (center). En caso de no indicar profundidad, se le asignará 0; esto significa que si se trabaja en 2D, se puede omitir el tercer parámetro sin problema.
Vamos a crear un nuevo ejemplo con un cuadrado que vamos a escalar al 50%, pero modificando el punto de origen, indicando que debe situarse a al derecha del todo de la caja contenedora y centrado verticalmente.
Código CSS:
.origen {
background: teal;
height: 40px;
transform: scale(0.5);
transform-origin: right center;
width: 40px;
}
Resultado:
La propiedad ‘transform-style’
La propiedad CSS transform-style permite establecer si los elementos hijos deben estar posicionados en un espacio 2D, quedando integrados en el espacio del elemento, o si deben estar posicionados en el espacio tridimensional. Por tanto, permite modificar el espacio dimensional de los elementos hijos.
Esta propiedad puede tener los siguientes valores:
| valor | Descripción |
|---|---|
flat | Los elementos hijos se integran en el plano 2D (por defecto). |
preserve-3d | Los elementos hijos se posicionan en un espacio 3D. |
Esta propiedad no se hereda sobre otros elementos. Esto significa que, en caso de que sea necesario, deberá indicarse de forma específica e individual el valor de transform-style sobre los elementos que le sean descendientes.
Vamos a ver un par de ejemplos para comparar los valores flat y preserve-3d. El elemento contenedor (padre) es un plano cuadrado y naranja de 40 píxeles de lado, y el elemento hijo tiene las mismas dimensiones, pero es turquesa, está rotado 45 grados en el eje vertical y se encuentra en perspectiva.
Código CSS:
.espacio2d,
.espacio3d {
background: #ff7f2a;
height: 40px;
display: inline-block;
width: 40px;
}
.espacio2d {
transform-style: flat;
}
.espacio3d {
transform-style: preserve-3d;
}
.hijo {
background: teal;
height: 40px;
transform: perspective(80px) rotateY(45deg);
width: 40px;
}
Resultado:
En el primer ejemplo, el elemento padre (clase espacio2d) usa el valor flat. Se puede ver como el elemento hijo aparece de forma completa, quedando integrado en un contenedor que solo tiene dos dimensiones (plano 2D).
En el segundo ejemplo, el elemento padre (clase espacio3d) usa el valor preserve-3d. En este caso, el elemento hijo se encuentra en un espacio 3D, por lo que su plano corta por el centro el del elemento contenedor.
