Transformaciones 3D
CSS también admite transformaciones 3D.
En este capítulo aprenderá sobre la siguiente propiedad CSS:
transform
Compatibilidad con el 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 3D
Con la propiedad transform CSS puedes utilizar los siguientes métodos de transformación 3D:
rotateX()rotateY()rotateZ()
El método rotateX()
El método rotateX() rota un elemento alrededor de su eje X en un grado dado:
Ejemplo:
#myDiv {
transform: rotateX(150deg);
}
El método rotateY()
El método rotateY() rota un elemento alrededor de su eje Y en un grado determinado:
Ejemplo:
#myDiv {
transform: rotateY(150deg);
}
El método rotateZ()
El método rotateZ() rota un elemento alrededor de su eje Z en un grado dado:
Ejemplo:
#myDiv {
transform: rotateZ(90deg);
}
Propiedades transform
| 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. |
transform-style | Especifica cómo se representan los elementos anidados en el espacio 3D. |
perspective | Especifica la perspectiva sobre cómo se ven los elementos 3D. |
perspective-origin | Especifica la posición inferior de los elementos 3D. |
backface-visibility | Define si un elemento debe ser visible o no cuando no está frente a la pantalla. |
Métodos transform 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 4x4 de 16 valores. |
translate3d(x,y,z) | Define una traducció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 de escala 3D. |
scaleX(x) | Define una transformación de escala 3D dando un valor para el eje X. |
scaleY(y) | Define una transformación de escala 3D dando un valor para el eje Y. |
scaleZ(z) | Define una transformación de escala 3D dando un valor para el eje Z. |
rotate3d(x,y,z,angle) | Define una rotación 3D. |
rotateX(angle) | Define una rotación 3D a lo largo del eje X. |
rotateY(angle) | Define una rotación 3D a lo largo del eje Y. |
rotateZ(angle) | Define una rotación 3D a lo largo del eje Z. |
perspective(n) | Define una vista en perspectiva para un elemento transformado en 3D. |
Traducido con 💚 desde W3Schools.com