CSS3 Transformaciones 3D

---

Transformaciones 3D

CSS3 le permite usar transformaciones 3D para formatear elementos.

En este capítulo, aprenderá algunos de estos métodos de transformación 3D:

• rotateX()
• rotateY()

Haga clic en los elementos de abajo para ver la diferencia entre las transformaciones 2D y 3D:

---

Soporte del navegador

Los números de la tabla indican la primera versión del navegador que admite la propiedad.

Los números precedidos por -webkit-, -ms- o -moz- indican la primera versión del navegador que admite la propiedad con ese prefijo.

Propiedad
transform	36.0 12.0 -webkit-	10.0	16.0 10.0 -moz-	4.0 -webkit-	23.0 15.0 -webkit-
transform-origin (three-value syntax)	36.0 12.0 -webkit-	10.0	16.0 10.0 -moz-	4.0 -webkit-	23.0 15.0 -webkit-
transform-style	36.0 12.0 -webkit-	11.0	16.0 10.0 -moz-	4.0 -webkit-	23.0 15.0 -webkit-
perspective	36.0 12.0 -webkit-	10.0	16.0 10.0 -moz-	4.0 -webkit-	23.0 15.0 -webkit-
perspective-origin	36.0 12.0 -webkit-	10.0	16.0 10.0 -moz-	4.0 -webkit-	23.0 15.0 -webkit-
backface-visibility	36.0 12.0 -webkit-	10.0	16.0 10.0 -moz-	4.0 -webkit-	23.0 15.0 -webkit-

Método rotateX()

El método rotateX() gira el elemento alrededor de su eje X en un grado dado.

---

Método rotateY()

El método rotateY() gira el elemento alrededor de su eje Y en un grado dado.

---

Propiedades de transformación

La siguiente tabla enumera todas las propiedades de transformación:

Propiedad	Descripción	CSS
transform	Aplica una transformación 2D o 3D a un elemento.	3
transform-origin	Le permite cambiar la posición del elemento transformado.	3
transform-style	Especifica cómo se muestran los elementos anidados en el espacio 3D.	3
perspective	Especifica el efecto de perspectiva de los elementos 3D.	3
perspective-origin	Especifica la posición inferior de los elementos 3D.	3
backface-visibility	Define si el elemento es visible cuando no está orientado hacia la pantalla.	3

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 utilizando una matriz de 4x4 con 16 valores.
translate3d(x,y,z)	Define una transformación 3D.
translateX(x)	Define una transformación 3D usando solo los valores del eje X.
translateY(y)	Define una transformación 3D usando solo los valores del eje Y.
translateZ(z)	Define una transformación 3D usando solo los valores del eje Z.
scale3d(x,y,z)	Define una transformación de escala 3D.
scaleX(x)	Define una transformación de escala 3D mediante un valor dado para el eje X.
scaleY(y)	Define una transformación de escala 3D mediante un valor dado para el eje Y.
scaleZ(z)	Define una transformación de escala 3D mediante un valor dado 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 la vista en perspectiva de un elemento con transformación 3D.

Otras extensiones