CSS3 Transformaciones 2D
Transformaciones CSS3
Las transformaciones CSS3 pueden mover, escalar, girar, alargar o estirar elementos.
¿Cómo funciona?
El efecto de la transformación es hacer que un elemento cambie de forma, tamaño y posición.
Puede transformar sus elementos utilizando transformaciones 2D o 3D.
Mueva el mouse sobre los siguientes elementos para ver los efectos de transformación 2D y 3D:
Compatibilidad del navegador
Los números de la tabla indican la primera versión del navegador que admite la propiedad.
Los números que aparecen inmediatamente antes de -webkit-, -ms- o -moz- indican la primera versión del navegador que admite la propiedad con ese prefijo.
| Propiedad | |||||
|---|---|---|---|---|---|
| transform | 36.0 4.0 -webkit- |
10.0 9.0 -ms- |
16.0 3.5 -moz- |
3.2 -webkit- | 23.0 15.0 -webkit- 12.1 10.5 -o- |
| transform-origin (two-value syntax) |
36.0 4.0 -webkit- |
10.0 9.0 -ms- |
16.0 3.5 -moz- |
3.2 -webkit- | 23.0 15.0 -webkit- 12.1 10.5 -o- |
Internet Explorer 10, Firefox y Opera son compatibles con la propiedad transform.
Chrome y Safari requieren la versión con prefijo -webkit-.
Nota:Internet Explorer 9 requiere la versión con prefijo -ms-.
Transformaciones 2D
En este capítulo conocerá los métodos de transformación 2D:
- translate()
- rotate()
- scale()
- skew()
- matrix()
En el próximo capítulo conocerá las transformaciones 3D.
Ejemplos
Pruébelo »
Método translate()
El método translate() mueve el elemento desde su posición actual según los parámetros dados para la izquierda (eje X) y la parte superior (eje Y).
Ejemplos
Pruébelo »
El valor translate(50px, 100px) mueve el elemento 50 píxeles desde la izquierda y 100 píxeles desde la parte superior.
Método rotate()
El método rotate() gira un elemento en el sentido de las agujas del reloj según un ángulo dado. Se permiten valores negativos, lo que hace que el elemento gire en sentido antihorario.
Ejemplos
Pruébelo »
El valor rotate(30deg) gira el elemento 30 grados en el sentido de las agujas del reloj.
Método scale()
El método scale() aumenta o disminuye el tamaño del elemento, dependiendo de los parámetros de ancho (eje X) y alto (eje Y):
Ejemplos
Pruébelo »
scale(2,3) transforma el ancho al doble de su tamaño original y la altura al triple de su tamaño original.
Método skew()
Sintaxis
transform:skew(<angle> [,<angle>]);
Contiene dos valores de parámetro que representan el ángulo de inclinación en los ejes X e Y respectivamente. Si el segundo parámetro está vacío, el valor predeterminado es 0. Un parámetro negativo indica inclinación en la dirección opuesta.
- skewX(<angle>); indica inclinación solo en el eje X (dirección horizontal).
- skewY(<angle>); indica inclinación solo en el eje Y (dirección vertical).
Ejemplos
Pruébelo »
skew(30deg,20deg)El elemento enXel eje X y el eje YYse inclina 20 y 30 grados.
Método matrix()
El método matrix() combina todos los métodos de transformación 2D en uno solo.
El método matrix tiene seis parámetros e incluye funciones de rotación, escala, movimiento (traslación) e inclinación.
Ejemplos
Utilice el método matrix() para rotar un elemento div 30°
Pruébelo »
Nuevas propiedades de transformación
A continuación se enumeran todas las propiedades de transformación:
| Property | Descripción | CSS |
|---|---|---|
| transform | Se aplica a elementos con transformaciones 2D o 3D | 3 |
| transform-origin | Le permite cambiar la posición del elemento transformado | 3 |
Métodos de transformación 2D
| Función | Descripción |
|---|---|
| matrix(n,n,n,n,n,n) | Define una transformación 2D usando una matriz de seis valores. |
| translate(x,y) | Define una transformación 2D moviendo el elemento a lo largo de los ejes X e Y. |
| translateX(n) | Define una transformación 2D moviendo el elemento a lo largo del eje X. |
| translateY(n) | Define una transformació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 el alto del elemento. |
| scaleX(n) | Define una transformación de escala 2D, cambiando el ancho del elemento. |
| scaleY(n) | Define una transformación de escala 2D, cambiando el alto del elemento. |
| rotate(angle) | Define una rotación 2D, especificando el ángulo en el parámetro. |
| skew(x-angle,y-angle) | Define una transformación de inclinación 2D, a lo largo de los ejes X e Y. |
| skewX(angle) | Define una transformación de inclinación 2D, a lo largo del eje X. |
| skewY(angle) | Define una transformación de inclinación 2D, a lo largo del eje Y. |