Las transformaciones es uno de los elementos más interesantes que se introducen en CSS3 para convertir el lenguaje de hojas de estilo en un sistema capaz de realizar todo tipo de efectos visuales, incluido 2D y 3D. Las propiedades principales para realizar transformaciones son las siguientes:
Propiedades | Formato | Significado |
---|---|---|
transform |
función1, función2, ... | Aplica una o varias funciones de transformación sobre un elemento. |
transform-origin |
Cambia el punto de origen del elemento en una transformación. | |
transform-style |
flat | preserve-3d | Modifica el tratamiento de los elementos hijos. |
Comencemos por la propiedad transform
, mediante la cual podemos indicar una o varias transformaciones para realizar sobre un elemento, ya sean 2D (sobre dos ejes) o 3D (sobre tres ejes).
Funciones 2D
Existen múltiples propiedades CSS que ofrecen diferentes funcionalidades de transformación en dos dimensiones, que veremos a continuación:
Translaciones
Las funciones de translación son aquellas que realizan una transformación en la que mueven un elemento de un lugar a otro. Si especificamos un valor positivo en el eje X (horizontal), lo moveremos hacia la derecha, y si especificamos un valor negativo, lo moveremos hacia la izquierda. Lo mismo con el eje Y (vertical):
Funciones | Significado |
---|---|
translateX(x) |
Traslada el elemento una distancia de |
translateY(y) |
Traslada el elemento una distancia de |
translate(x, y) |
Propiedad de atajo de las dos anteriores. |
Por ejemplo, transform: translate(20px, -30px)
traslada el elemento 20 píxeles a la derecha y 30 píxeles hacia arriba, que es equivalente a utilizar transform: translateX(20px) translateY(-30px)
.
Escalado
Las funciones de escalado realizan una transformación en la que aumentan o reducen el tamaño de un elemento, basándose en el parámetro indicado, que no es más que un factor de escala:
Funciones | Significado |
---|---|
scaleX(fx) |
Reescala el elemento a un nuevo tamaño con un factor |
scaleY(fy) |
Reescala el elemento a un nuevo tamaño con un factor |
scale(fx, fy) |
Propiedad de atajo de las dos anteriores. |
En este ejemplo, transform: scale(2, 2)
realiza una transformación de escalado del elemento, ampliándolo al doble de su tamaño original. Si utilizamos scale()
con dos parámetros iguales, estamos manteniendo la proporción del elemento, pero si utilizamos diferentes valores, acabaría deformándose.
Rotaciones
Las funciones de rotación simplemente giran el elemento el número de grados indicado:
Funciones | Significado |
---|---|
rotateX(xdeg) |
Establece una rotación 2D en |
rotateY(ydeg) |
Establece una rotación 2D en |
rotate(deg) |
Establece una rotación 2D en |
Con transform: rotate(5deg)
realizamos una rotación de 5 grados del elemento sobre si mismo. Utilizando rotateX()
y rotateY()
podemos hacer lo mismo respecto al eje X o el eje Y respectivamente.
Deformaciones
Por último, las funciones de deformación establecen un ángulo para torcer, tumbar o inclinar un elemento en 2D:
Funciones | Significado |
---|---|
skewX(xdeg) |
Establece un ángulo de |
skewY(ydeg) |
Establece un ángulo de |
Aunque la función skew()
existe, no debería ser utilizada, ya que está marcada como obsoleta y serán retiradas de los navegadores en el futuro. En su lugar deberían utilizarse skewX()
o skewY()
.
Funciones 3D
Sin embargo, esto no es todo. A las funciones anteriores, también podemos añadir las funciones equivalentes de CSS para hacer uso del eje Z, o lo que es lo mismo, las tres dimensiones o 3D. Basta con utilizar el eje Z o las funciones específicas de 3D para poner estas animaciones en práctica.
Recordar siempre que el eje X es el eje horizontal, el eje Y es el eje vertical y el eje Z es el eje de profundidad.
Las propiedades de transformación que completarían la colección de transformaciones 2D que vimos anteriormente, son las siguientes:
Funciones | Significado |
---|---|
translateZ(z) |
Traslada el elemento una distancia de |
translate3d(x, y, z) |
Establece una translación 3D, donde aplica los parámetros de |
scaleZ(fz) |
Reescala el elemento a un nuevo tamaño con factor |
scale3d(fx, fy, fz) |
Establece un escalado 3D, donde aplica los factores a cada eje. |
rotateZ(zdeg) |
Establece una rotación 2D en |
rotate3d(x, y, z, deg) |
Establece una rotación 3D, aplicando un vector [x, y, z] y el ángulo en |
perspective(n) |
Establece una perspectiva 3D de |
matrix3d(n, n, ...) |
Establece una matriz de transformación 3D (16 valores) |
Veamos un ejemplo con rotate3d()
:
@keyframes rotation {
0% {
transform: rotate3d(1, 0, 0, 5deg);
}
100% {
transform: rotate3d(1, 1, 0, 220deg);
}
}
.anim {
background: #000;
color: #FFF;
width: 100px;
animation: rotation 2s ease-in-out 0 infinite alternate none running;
}
Finalmente, se puede utilizar la función matrix()
y matrix3d()
para obtener transformaciones personalizadas más complejas y específicas. Tienes más información sobre ellas en el artículo Understanding the CSS Transforms Matrix de los desarrolladores del navegador Opera.
Transformaciones múltiples
Recuerda que si estableces varias propiedades transform
en el mismo elemento con diferentes funciones de transformación, la segunda propiedad de transformación sobreescribirá a la anterior, como lo haría cualquier propiedad de CSS:
div {
transform: rotate(5deg);
transform: scale(2,2); /* Sobreescribe la anterior */
}
Para evitar este comportamiento, una forma sencilla se basa en emplear múltiples transformaciones separándolas mediante un espacio. En el siguiente ejemplo, aplicamos una función de rotación, una función de escalado y una función de traslación de forma simultánea:
div {
transform: rotate(5deg) scale(2,2) translate(20px, 40px);
}
Si lo que queremos hacer no es posible realizarlo de esta forma, probablemente lo más apropiado sería guardar los valores en atributos de metadatos como data-tx
, data-ty
, data-sx
, data-sy
y data-rz
o similares y manipulándolos desde Javascript.
El soporte de estas propiedades es muy bueno en el ecosistema de navegadores actual, por lo que puede utilizarse con seguridad: