Skip to content
Related Articles

Related Articles

HTML | DOM Style backfaceVisibility Property
  • Last Updated : 29 Jul, 2019

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.






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

Output:

  • Before hidden:

  • After hidden:

      Example-2: Sets backfaceVisibility from visible to hidden.




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

      Output:

      • Before hidden:

      • After hidden:

          Note: Chrome version (12-35), Safari new updated versions and Opera 15+ versions support an alternative property called the “WebkitBackfaceVisibility property”.

          Supported Browsers: The browser supported by DOM Style backfaceVisibility Property
          are listed below:

          • Google Chrome 36.0 12.0 Webkit
          • Internet Explorer 10.0/Edge
          • Mozilla Firefox 16.0 10.0 Moz
          • Opera 23.0 15.0 Webkit
          • Apple Safari 4.0 Webkit
          My Personal Notes arrow_drop_up
Recommended Articles
Page :