Teach with us

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 12:03:19

0 Views

Tutorials Point

Previous Page Next Page  
Advertisements