Table of contents
Transformaciones 2D
Las transformaciones CSS le permiten mover, rotar, escalar y sesgar elementos.
En este capítulo aprenderá sobre la siguiente propiedad CSS:
transform
Compatibilidad con navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
| Propiedad | Chrome | Edge | Mozilla | Safari | Opera |
transform | 36.0 | 10.0 | 16.0 | 9.0 | 23.0 |
Métodos de transformación 2D
Con la propiedad transform puedes utilizar los siguientes métodos de transformación 2D:
translate()rotate()scaleX()scaleY()scale()skewX()skewY()skew()matrix()
Tip: Aprenderás más acerca de las transformaciones 3D en el próximo capítulo.
El método translate()
El método translate() mueve un elemento desde su posición actual (según los parámetros proporcionados para el eje X y el eje Y).
El siguiente ejemplo mueve el elemento <div> 50 píxeles a la derecha y 100 píxeles hacia abajo desde su posición actual:
Ejemplo:
div {
transform: translate(50px, 100px);
}
El método rotate()
El método rotate() gira un elemento en sentido horario o antihorario según un grado dado.
El siguiente ejemplo gira el elemento <div> en el sentido de las agujas del reloj 20 grados:
Ejemplo:
div {
transform: rotate(20deg);
}
El uso de valores negativos rotará el elemento en sentido contrario a las agujas del reloj.
El siguiente ejemplo gira el elemento <div> en sentido contrario a las agujas del reloj 20 grados:
Ejemplo:
div {
transform: rotate(-20deg);
}
El método scale()
El método scale() aumenta o disminuye el tamaño de un elemento (según los parámetros dados para el ancho y alto).
El siguiente ejemplo aumenta el elemento <div> para que sea dos veces su ancho original y tres veces su altura original:
Ejemplo:
div {
transform: scale(2, 3);
}
El siguiente ejemplo reduce el elemento <div> a la mitad de su ancho y alto originales:
Ejemplo:
div {
transform: scale(0.5, 0.5);
}
El método scaleX()
El método scaleX() aumenta o disminuye el ancho de un elemento.
El siguiente ejemplo aumenta el elemento <div> al doble de su ancho original:
Ejemplo:
div {
transform: scaleX(2);
}
El siguiente ejemplo reduce el elemento <div> a la mitad de su ancho original:
div {
transform: scaleX(0.5);
}
El método scaleY()
El método scaleY() aumenta o disminuye la altura de un elemento.
El siguiente ejemplo aumenta el elemento <div> al triple de su altura original:
Ejemplo:
div {
transform: scaleY(3);
}
El siguiente ejemplo reduce el elemento <div> a la mitad de su altura original:
Ejemplo:
div {
transform: scaleY(0.5);
}
El método skewX()
El método skewX() sesga un elemento a lo largo del eje X en el ángulo dado.
El siguiente ejemplo sesga el elemento <div> 20 grados a lo largo del eje X:
Ejemplo:
div {
transform: skewX(20deg);
}
El método skewY()
El método skewY() sesga un elemento a lo largo del eje Y en el ángulo dado.
El siguiente ejemplo sesga el elemento <div> 20 grados a lo largo del eje Y:
Ejemplo:
div {
transform: skewY(20deg);
}
El método skew()
El método skew() sesga un elemento a lo largo de los ejes X y Y en los ángulos dados.
El siguiente ejemplo sesga el elemento <div> 20 grados a lo largo del eje X y 10 grados a lo largo del eje Y:
Ejemplo:
div {
transform: skew(20deg, 10deg);
}
Si no se especifica el segundo parámetro, tiene valor cero. Entonces, el siguiente ejemplo sesga el elemento <div> 20 grados a lo largo del eje X:
Ejemplo:
div {
transform: skew(20deg);
}
El método matrix()
El método matrix() combina todos los métodos de transformación 2D en uno.
El método matrix() toma seis parámetros, que contienen funciones matemáticas, que le permiten rotar, escalar, mover (traducir) y sesgar elementos.
Los parámetros son los siguientes: matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())
Ejemplo:
div {
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
Las propiedades transform
La siguiente tabla enumera todas las propiedades de transformación 2D:
| Propiedad | Descripción |
transform | Aplica una transformación 2D o 3D a un elemento. |
transform-origin | Le permite cambiar la posición de los elementos transformados. |
Los métodos de transform
| Función | Descripción |
matrix(n,n,n,n,n,n) | Define una transformación 2D, utilizando una matriz de seis valores. |
translate(x,y) | Define una traslación 2D, moviendo el elemento a lo largo de los ejes X e Y. |
translateX(n) | Define una traslación 2D, moviendo el elemento a lo largo del eje X. |
translateY(n) | Define una traslación 2D, moviendo el elemento a lo largo del eje Y. |
scale(x,y) | Define una transformación de escala 2D, cambiando el ancho y alto de los elementos. |
scaleX(n) | Define una transformación de escala 2D, cambiando el ancho del elemento. |
scaleY(n) | Define una transformación de escala 2D, cambiando la altura del elemento. |
rotate(angle) | Define una rotación 2D, el ángulo se especifica en el parámetro. |
skew(x-angle,y-angle) | Define una transformación de sesgo 2D a lo largo de los ejes X e Y. |
skewX(angle) | Define una transformación de sesgo 2D a lo largo del eje X. |
skewY(angle) | Define una transformación de sesgo 2D a lo largo del eje Y. |
Traducido con 💚 desde W3Schools.com