HTML | DOM Style backfaceVisibility Property

The backfaceVisibility property is the deciding factor that would make an element visible or invisible when the element is not facing the screen. This property is helpful when an element is rotated, and its backside needs to be hidden.

Syntax:

  • Return the backfaceVisibility property:
    object.style.backfaceVisibility
  • Set the backfaceVisibility property:
    object.style.backfaceVisibility = "visible|hidden|initial|
    inherit"

Property Values:

  • visible: The visible value is the Default value. It helps in making the backside visible.
  • hidden: The hidden value would make the backside invisible.
  • initial: The initial value sets this property to its default value.
  • inherit: It is used to inherit the property from its parent element.

Return Value: It returns a string, which represents the behavior of backfaceVisibility property of an element.

Example-1: Sets backfaceVisibility from visible to hidden.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

  • Before hidden:

  • After hidden:

    • Example-2: Sets backfaceVisibility from visible to hidden.

      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      <!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>

      chevron_right

      
      

      Output: