La cara posterior visibilidad en la propiedad CSS

CSS | la cara posterior visibilidad Propiedad : Aquí, vamos a aprender acerca de la propiedad de la cara posterior visibilidad con la sintaxis, ejemplos de CSS (Cascading Style Sheet).

CSS | la cara posterior visibilidad Propiedad

Kickstart:

El desarrollo de una página web a veces puede llegar a ser un reto, ya que tratamos con muchos elementos y, a veces no somos conscientes de las propiedades estar implicada class mejor funcionamiento o edición. Este tipo de problema se enfrenta a muchos desarrolladores web profesionales y mucho más por los principiantes. Pero como se suele decir, si no ha aprendido nada diferente a continuación, tiene que aprendió en absoluto?

En esta sección se trata de uno de tales bienes con los que puede que no sea consciente y por lo tanto este artículo es para ayudarle a entender todo lo que necesita saber acerca de este inmueble. El nombre de la propiedad es la propiedad de la cara posterior -visibilidad en CSS . Ahora su nombre puede sonar desconcertante, pero no se preocupen la sección de abajo tiene que ver con la definición!

Definición:

Tengamos un get-a-saber de la propiedad antes de seguir más adelante con más detalles.

La cara posterior de cualquier elemento es una imagen especular de la cara frontal. La propiedad cara posterior-visibilidad en CSS se utiliza para definir si la cara posterior de un elemento es visible para el usuario o no.

Esta propiedad es útil cuando un elemento se gira y se decide si el usuario debería ver la cara posterior del elemento o no.

Hay dos valores a esta propiedad,

  • oculta
  • visibles

Sintaxis:

    Element{
Backface-visibility : visible|hidden|initial|inherit;
}

Vamos a discutir cada una propiedad por uno,

cara posterior visibilidad:

visibles

Muy fácil de usar y entender la propiedad, el nombre mismo da la definición. Este valor de la propiedad cara posterior-visibilidad se utiliza para mostrar la cara posterior de un elemento para el usuario. También es el valor for default esta propiedad.

Sintaxis:

    Element{
backface-visibility : visible;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
div {
position: relative;
height: 100px;
width: 100px;
background-color: yellow;
transform: rotateY(180deg);
}
div {
backface-visibility: visible;
}
</style>
</head>
<body>
<h1>The backface-visibility Property</h1>
<div>VISIBLE</div>
</body>
</html>

salida

The backface-visibility Property in CSS - 4

En el ejemplo anterior, si se observa a continuación, se puede ver el fin de la palabra visibles se invierte, de forma similar a lo que ocurre cuando vemos un reflejo de algo en el espejo, por lo tanto, la imagen del espejo que es la cara posterior del elemento div es visible para el usuario.

cara posterior visibilidad: oculto

Puede recordar este valor como el revés del valor visible ya que este valor de la propiedad de la cara posterior visibilidad se utiliza para ocultar la cara posterior de un elemento para el usuario.

Sintaxis:

    Element{
backface-visibility : hidden;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
div {
position: relative;
height: 100px;
width: 100px;
background-color: yellow;
transform: rotateY(180deg);
}
div {
backface-visibility: hidden;
}
</style>
</head>
<body>
<h1>The backface-visibility Property</h1>
<div>HIDDEN</div>
</body>
</html>

salida

The backface-visibility Property in CSS - 5

En el ejemplo anterior, se entiende claramente que mientras que el valor oculto está activado de la cara trasera propiedad, entonces la imagen del espejo no se mostrará al usuario sólo la inversa del valor visible como se menciona en la definición, por lo tanto la cara posterior del elemento div se oculta para el usuario y no se muestra el elemento.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *