Transformaciones 3D CSS
CSS permite dar formato a sus elementos utilizando transformaciones 3D.
El método rotateX()
El método rotate()
gira un elemento alrededor su eje X en un grado dado:
div {
-webkit-transform: rotateX(150deg); /* Safari */
transform: rotateX(150deg);
}
El método rotateY()
El método rotateY()
gira un elemento alrededor de su eje Y en un grado dado:
div {
-webkit-transform: rotateY(130deg); /* Safari */
transform: rotateY(130deg);
}
El método rotateZ()
El método rotateZ()
gira un elemento alrededor de su eje Z en un grado dado:
div {
-webkit-translate: rotateZ(90deg); /* Safari */
transform: rotateY(90deg);
}
Propiedades de transformaciones CSS
En la siguiente tabla se listan las propiedades de transformaciones 3D:
Propiedad | Descripción |
---|---|
transform | Aplica a un elemento para transformaciones 2D y 3D. |
transform-origin | Permite cambiar la posición a un elemento transformado. |
transform-style | Especifica como deben representarse los elementos anidados en un espacio 3D. |
perspective | Especifica la perspectiva de como deben representarse los elementos 3D. |
perspective-origin | Especifica la posición inferior de los elementos 3D. |
backface-visibility | Define su un elemento debe ser visible o no esta en frente pantalla. |
Métodos de transformación 3D
Función | Descripción |
---|---|
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | Define una transformación 3D, usando una matriz de 4x4 de 16 valores. |
translate3d(x,y,z) | Define una traslación 3D. |
translateX(x) | Define una traslación 3D, usando solo el valor para el eje X. |
translateY(y) | Define una traslación 3D, usando solo el valor para el eje Y. |
translateZ(z) | Define una traslación 3D, usando solo el valor para el eje Z. |
scale3d(x,y,z) | Define una transformación escalar 3D. |
scaleX(x) | Define una transformación escalar 3D, usando solo el valor para el eje X. |
scaleY(y) | Define una transformación escalar 3D, usando solo el valor para el eje Y. |
scaleZ(z) | Define una transformación escalar 3D, usando solo el valor pare el eje Z. |
rotate3d(x,y,z,ángulo) | Define una rotación 3D. |
rotateX(ángulo) | Define una rotación 3D a lo largo del eje X. |
rotateY(ángulo) | Define una rotación 3D a lo largo del eje Y. |
rotateZ(ángulo) | Define una rotación 3D a lo largo del eje Z. |
perspective(n) | Define una vista de perspectiva de un elemento con transformación 3D. |