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

JavascriptWeb DevelopmentFront End Scripts

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>
raja
Published on 27-Feb-2018 10:54:24
Advertisements