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

En este artículo, aprenderá cómo controlar la visibilidad de los divs de HTML al aplicar el CSS 3D transformar propiedad.

CSS le permite realizar transformaciones 3D en elementos utilizando las propiedades de transformación CSS. Hay dos métodos para 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): Outline una rotación 3D a lo largo de los tres ejes.
• transformar:rotarX(Ángulo): Outline una rotación 3D a lo largo del eje X.
• transformar: rotar Y (Ángulo): Outline una rotación 3D a lo largo del eje Y.
• transformar: rotar Z (Ángulo): Outline una rotación 3D a lo largo del eje Z.
• transformar: traducir 3d (X, Y, Z): Outline la traducción 3D.
• transformar: traducirX(X): Outline la traducción 3D usando solo valores del eje X.
• transformar: traducir Y (Y): Outline la traducción 3D usando solo valores del eje Y.
• transformar: traducirZ(Z): Outline la traducción 3D usando solo valores del eje Z.
• transformar:escala3d(X,Y,Z): Outline la transformación a escala 3D
• transformar:escalaX(X): Outline una transformación de escala 3D dado el valor del eje X.
• transformar:escalaY(Y): Outline una transformación de escala 3D dado el valor del eje Y.
• transformar:escalaZ(Z): Outline una transformación de escala 3D dado el valor del eje Z.
• transformar:perspectiva(s): Outline la vista en perspectiva del elemento de transformación 3D.

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

Sintaxis:

transform-origin:(middle/proper/left/prime/backside/length-percentage);                

CSS visibilidad de la cara posterior La propiedad nos permite administrar la visibilidad de los elementos durante la transformación 3D. Esta propiedad establece la visibilidad de la imagen reflejada o el reverso de un elemento durante la transformación 3D. Por ejemplo, en la rotación 3D de un elemento, la parte posterior del elemento debe ser seen para el espectador o no puede ser manejada por esta propiedad.

Sintaxis:

backface-visibility: seen|hidden|preliminary|inherit;

Valores:

• seen: El lado posterior del elemento será seen para el espectador durante la transformación 3D.
• oculto: La parte posterior del elemento no será seen para el espectador durante la transformación 3D.
• inicial: Establece el valor predeterminado. El valor predeterminado es seen.
• heredar: Hereda el valor del elemento padre.

Ejemplo 1: En el siguiente ejemplo, hemos creado un elemento, elemento, al que se aplica CSS. Cuando el usuario hace clic en el botón, el transformar: rotar Y (180 grados) La propiedad se aplicará al elemento de imagen. Inicialmente, el ‘visibilidad de cara posterior’ se establece en ‘seen‘. Por lo tanto, el reverso de la imagen será seen para el espectador durante la transformación definida.

Producción:

Ejemplo 2: En el siguiente ejemplo, hemos establecido el ‘backface-visibilidad‘ a ‘oculto‘. Cuando el usuario haga clic en el botón, se realizará la transformación pero la parte posterior de la imagen no será seen.

Producción: