Computer >> Computer tutorials >  >> Programming >> CSS

Determine whether an element should be visible when not facing the screen with CSS


To determine whether an element should be visible when not facing the screen, use the backface-visibility property:

Example

<!DOCTYPE html>
<html>
<head>
   <style>
      .demo1 {
         position: relative;
         width: 150px;
         height: 150px;
         background-color: yellow;
         perspective: 80px;
         margin: 50px;
         perspective-origin: left;
         transform: rotateY(180deg);
      }
      .demo2 {
         position: absolute;
         padding: 20px;
         background-color: orange;
         transform-style: preserve-3d;
         transform: rotateX(45deg);
         backface-visibility: visible;
      }
      </style>
   </head>
   <body>
      <h1>Rotation</h1>
      <div class = "demo1">Demo
         <div class = "demo2">Demo</div>
      </div>
   </body>
</html>