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

CSSWeb DevelopmentFront End Technology

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

Example

Live Demo

<!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>
raja
Published on 16-May-2018 11:55:46
Advertisements