Saltar al contenido

¿Cómo administrar la visibilidad de div durante la transformación 3d?

ezgifcom gif maker1 ¿Cómo administrar la visibilidad de div durante la transformación 3d?

En este artículo, aprenderá a controlar la visibilidad de las divisiones HTML al aplicar CSS 3D. viajar propiedad.

CSS le permite realizar transformaciones 3D en elementos usando propiedades de transformación CSS. Hay dos formas de definir una transformación en CSS.

1. transformar: Esta propiedad le permite definir la transformación del elemento en 2D y 3D. Se pueden usar varios valores de transformación para crear un efecto de transformación en un elemento usando esta propiedad. Los siguientes valores se pueden aplicar a la propiedad de transformación CSS para crear una transformación 3D.

  • transformar: rotar3d (X, Y, Z, Ángulo): Define una rotación 3D a lo largo de los tres ejes.
  • transformar:rotarX(Ángulo): Define una rotación 3D a lo largo del eje X.
  • transformar: rotar Y (Ángulo): Define una rotación 3D a lo largo del eje Y.
  • transformar: rotar Z (ángulo): Define una rotación 3D a lo largo del eje Z.
  • transformar: traducir 3d (X, Y, Z): Define la traducción 3D.
  • transformar: traducirX(X): Define la traducción 3D usando solo valores del eje X.
  • transformar: traducirY(Y): Define la traducción 3D usando solo valores del eje Y.
  • transformar: traducirZ(Z): Define la traducción 3D usando solo valores del eje Z.
  • transformar:escala3d(X,Y,Z): Define la transformación de la escala 3D
  • transformar:escalaX(X): Define una transformación de escala 3D dado el valor del eje X.
  • transformar:escalaY(Y): Define una transformación de escala 3D dado el valor del eje Y.
  • transformar:escalaZ(Z): Define una transformación de escala 3D dado el valor del eje Z.
  • transformar:perspectiva(s): Define la vista en perspectiva del elemento de transformación 3D.

2. transformación-origen: Este método le permite definir el origen de la transformación. Por defecto, el origen es solo el centro. LA transformar-origen es el punto en el que se aplica la transformación. por ejemplo, el transformar-origen para la función de rotación() es el centro de rotación.

Sintaxis:

transform-origin:[center/right/left/top/bottom/length-percentage];

La propiedad CSS backface-visibility nos permite administrar la visibilidad de los elementos durante la transformación 3d. Esta propiedad establece la visibilidad de la imagen reflejada o la parte posterior de un elemento durante la transformación 3D. Por ejemplo, en la rotación 3D de un elemento, el lado posterior del elemento debe ser visible para el espectador o no puede ser manejado por esta propiedad.

Sintaxis: 

backface-visibility: visible|hidden|initial|inherit;

Valores:

  • visible: El lado posterior del elemento será visible para el espectador durante la transformación 3d.
  • oculto: El reverso del artículo no será visible para el espectador durante la transformación 3D.
  • inicial: Establezca el valor predeterminado. El valor predeterminado es visible.
  • heredar: Heredar el valor del elemento principal.

Ejemplo 1: En el siguiente ejemplo, hemos creado un elemento elemento