Transformaciones CSS 2D
Transformaciones CSS 2D
Las transformaciones CSS le permiten mover, rotar, escalar y sesgar elementos.
Pase el mouse sobre el elemento a continuación para ver una transformación 2D:
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.
| Property | |||||
|---|---|---|---|---|---|
| transform | 36.0 |
10.0 |
16.0 |
9.0 |
23.0 |
Métodos de transformación CSS 2D
Con la propiedad CSS transformpuede utilizar los siguientes métodos de transformación 2D:
translate()rotate()scaleX()scaleY()scale()skewX()skewY()skew()matrix()
Sugerencia: aprenderá acerca de las transformaciones 3D en el próximo capítulo.
El método traducir()
El translate()método mueve un elemento desde su posición actual (según los parámetros dados 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 rotar()
El rotate()método gira un elemento en el sentido de las agujas del reloj o en el sentido contrario a las agujas del reloj según un grado determinado.
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 scale()método 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 scaleX()método 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:
Ejemplo
div
{
transform: scaleX(0.5);
}
El método scaleY()
El scaleY()método 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 skewX()método 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 skewY()método sesga un elemento a lo largo del eje Y por 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 sesgado()
El skew()método sesga un elemento a lo largo de los ejes X e 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 matrix()método 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);
}
Propiedades de transformación CSS
La siguiente tabla enumera todas las propiedades de transformación 2D:
| Property | Description |
|---|---|
| transform | Applies a 2D or 3D transformation to an element |
| transform-origin | Allows you to change the position on transformed elements |
Métodos de transformación 2D CSS
| Function | Description |
|---|---|
| matrix(n,n,n,n,n,n) | Defines a 2D transformation, using a matrix of six values |
| translate(x,y) | Defines a 2D translation, moving the element along the X- and the Y-axis |
| translateX(n) | Defines a 2D translation, moving the element along the X-axis |
| translateY(n) | Defines a 2D translation, moving the element along the Y-axis |
| scale(x,y) | Defines a 2D scale transformation, changing the elements width and height |
| scaleX(n) | Defines a 2D scale transformation, changing the element's width |
| scaleY(n) | Defines a 2D scale transformation, changing the element's height |
| rotate(angle) | Defines a 2D rotation, the angle is specified in the parameter |
| skew(x-angle,y-angle) | Defines a 2D skew transformation along the X- and the Y-axis |
| skewX(angle) | Defines a 2D skew transformation along the X-axis |
| skewY(angle) | Defines a 2D skew transformation along the Y-axis |