HTML | Propiedad de visibilidad de cara posterior de estilo DOM

La propiedad backfaceVisibility es el factor decisivo que haría que un elemento fuera visible o invisible cuando el elemento no está frente a la pantalla. Esta propiedad es útil cuando se gira un elemento y es necesario ocultar su parte posterior .

Sintaxis:

Devuelve la propiedad backfaceVisibility:
```
object.style.backfaceVisibility
```

Establezca la propiedad backfaceVisibility:

object.style.backfaceVisibility = "visible|hidden|initial|
inherit"

Valores de propiedad:

visible: el valor visible es el valor predeterminado. Ayuda a hacer visible la parte trasera.
oculto: el valor oculto haría invisible la parte trasera.
initial: el valor inicial establece esta propiedad en su valor predeterminado.
heredar: Se utiliza para heredar la propiedad de su elemento padre.

Valor devuelto: Devuelve una string, que representa el comportamiento de la propiedad backfaceVisibility de un elemento.

Ejemplo-1: Establece backfaceVisibility de visible a oculto.

<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML DOM Style backfaceVisibility Property
    </title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background: green;
            color: white;
            /* Chrome, Safari, Opera */
            -webkit-animation: mymove 3s infinite linear alternate;
            animation: mymove 3s infinite linear alternate;
        }
        /* Chrome, Safari, Opera */
          
        @-webkit-keyframes mymove {
            to {
                -webkit-transform: rotateX(180deg);
            }
        }
          
        @keyframes mymove {
            to {
                transform: rotateX(180deg);
            }
        }
    </style>
</head>
  
<body>
  
    <p>
      Select/deselect the checkbox to change the 
      backface-visibility of the animated element:
    </p>
  
    <div id="myGFG">
        <h1>HEY GEEKS</h1>
    </div>
  
    <input type="checkbox" onclick="flip(this)" checked> 
     backface-visibility
  
    <script>
        function flip(x) {
            if (x.checked === true) {
  
                // Code for Chrome, Safari, Opera
                document.getElementById(
                        "myGFG").style.WebkitBackfaceVisibility =
                    "visible";
                document.getElementById(
                        "myGFG").style.backfaceVisibility =
                    "visible";
            } else {
                // Code for Chrome, Safari, Opera
                document.getElementById(
                        "myGFG").style.WebkitBackfaceVisibility =
                    "hidden";
  
                document.getElementById(
                        "myGFG").style.backfaceVisibility =
                    "hidden";
            }
        }
    </script>
</body>
  
</html>

Producción:

Antes oculto:
Después de oculto:

Ejemplo-2: Establece backfaceVisibility de visible a oculto.

<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML DOM Style backfaceVisibility Property
    </title>
  
    <style>
        div {
            width: 100px;
            height: 100px;
            background: green;
            color: white;
            -webkit-animation: mymove 2s infinite linear alternate;
            /* Chrome, Safari, Opera */
            animation: mymove 2s infinite linear alternate;
        }
        /* Chrome, Safari, Opera */
          
        @-webkit-keyframes mymove {
            to {
                -webkit-transform: rotateY(180deg);
            }
        }
          
        @keyframes mymove {
            to {
                transform: rotateY(180deg);
            }
        }
    </style>
</head>
  
<body>
  
    <p>
      Select/deselect the checkbox to change the 
      backface-visibility of the animated element:
    </p>
    <div id="myGFG">
        <h1>GEEKS FOR GEEKS</h1>
    </div>
  
    <input type="checkbox" onclick="flip(this)" checked> 
      backface-visibility
  
    <script>
        function flip(x) {
            if (x.checked === true) {
  
                // Code for Chrome, Safari, Opera
                document.getElementById(
                        "myGFG").style.WebkitBackfaceVisibility =
                    "visible";
                document.getElementById(
                        "myGFG").style.backfaceVisibility =
                    "visible";
            } else {
                // Code for Chrome, Safari, Opera
                document.getElementById(
                        "myGFG").style.WebkitBackfaceVisibility =
                    "hidden";
                document.getElementById(
                        "myGFG").style.backfaceVisibility =
                    "hidden";
            }
        }
    </script>
  
</body>
  
</html>

Producción:

Antes oculto:
Después de oculto:

Nota: la versión de Chrome (12-35), las nuevas versiones actualizadas de Safari y las versiones de Opera 15+ admiten una propiedad alternativa llamada «propiedad WebkitBackfaceVisibility».

Navegadores compatibles: los navegadores compatibles con DOM Style backfaceVisibility Property
se enumeran a continuación:

Google Chrome 36.0 12.0 Webkit
Internet Explorer 10.0/Edge
Mozilla Firefox 16.0 10.0Moz
Ópera 23.0 15.0 Webkit
Webkit Apple Safari 4.0

Publicación traducida automáticamente

Artículo escrito por MerlynShelley y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta