Las transformaciones 2D se utilizan para volver a cambiar la estructura del elemento como trasladar, rotar, escalar y sesgar.
La siguiente tabla contiene valores comunes que se utilizan en transformaciones 2D:
| No. | Valor y descripción |
|---|---|
| 1 | matrix(n,n,n,n,n,n) Se utiliza para definir transformadas de matriz con seis valores |
| 2 | translate(x,y) Se utiliza para transformar el elemento junto con el eje xy el eje y |
| 3 | tranalateX(n) Se utiliza para transformar el elemento junto con el eje x |
| 4 | translateY(n) Se utiliza para transformar el elemento junto con el eje y |
| 5 | scale(x,y) Se utiliza para cambiar el ancho y la altura del elemento. |
| 6 | scaleX(n) Se utiliza para cambiar el ancho del elemento. |
| 7 | scaleY(n) Se utiliza para cambiar la altura del elemento. |
| 8 | rotate (angle) Se utiliza para rotar el elemento en función de un ángulo. |
| 9 | skewX(angle) Se utiliza para definir transformaciones sesgadas junto con el eje x |
| 10 | skew Y (ángulo) Se utiliza para definir transformaciones sesgadas junto con el eje y |
Los siguientes ejemplos se muestran como muestra de todas las propiedades anteriores.
Giro de 30 grados
Rotación de la caja con un ángulo de 30 grados como se muestra a continuación:
Rotación de -50 grados
Rotación de caja con un ángulo de -50 grados como se muestra a continuación:
Eje X sesgado
Rotación de caja con eje x sesgado como se muestra a continuación:
Eje y sesgado
Rotación de caja con eje y sesgado como se muestra a continuación:
Transformación de matriz
Rotación de caja con transformaciones Matrix como se muestra a continuación: