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.