Set whether or not an element should be visible while not facing the screen with JavaScript?


Use the JavaScript backfaceVisibility property to set whether or not an element should be visible while not facing the screen.

Example

You can try to run the following code to learn how to implement a backfaceVisibility property in JavaScript −

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            width: 200px;
            height: 300px;
            background: blue;
            color: black;
            animation: mymove 2s infinite linear alternate;
         }
         @keyframes mymove {
            to {transform: rotateY(180deg);}
         }
      </style>
   </head>
   <body>
      <p>Check below to display backface</p>
      <div id="box">
         <h1>Demo</h1>
      </div>
      <input type="checkbox" onclick="display(this)" checked>backfaceVisibility Property
      <script>
         function display(x) {
            if (x.checked === true) {
               document.getElementById("box").style.backfaceVisibility = "visible";
            } else {
               document.getElementById("box").style.backfaceVisibility = "hidden";
            }
         }
      </script>
   </body>
</html>

Monica Mona
Monica Mona

Student of life, and a lifelong learner

Updated on: 23-Jun-2020

100 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements