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

410 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements