Syntax error How to specify the bottom position of 3D elements with CSS

How to specify the bottom position of 3D elements with CSS

To specify the bottom position of 3D elements, use the perspective-origin property.

You can try to run the following code to implement the perspective-origin 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;
         }
         .demo2 {
            position: absolute;
            padding: 20px;
            background-color: orange;
            transform-style: preserve-3d;
            transform: rotateX(45deg);
         }
      </style>
   </head>
   <body>
      <h1>Rotation</h1>
      <div class="demo1">Demo
         <div class="demo2">Demo
         </div>
      </div>
</body>
</html>
Updated on: 2020-06-23T16:24:15+05:30

402 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements