Specify how nested elements are rendered in 3D space



To specify how nested elements are rendered in 3D space, use the transform-style property in CSS.

You can try to run the following code to implement the transform-style property:

Example

Live Demo

<!DOCTYPE html> <html>    <head>       <style>          .demo1 {             width: 300px;             height: 300px;             background-color: yellow;          }          .demo2 {             width: 200px;             height: 200px;             background-color: orange;          }          .demo3 {             width: 100px;             height: 100px;             background-color: blue;             transform: rotate(10deg);             transform-origin: 30% 40%;             transform-style: preserve-3d;          }       </style>    </head>    <body>       <h1>Rotation</h1>       <div class = "demo1">Demo          <div class = "demo2">Demo             <div class = "demo3">                Demo             </div>          </div>       </div>    </body> </html>
Updated on: 2020-06-23T16:00:09+05:30

169 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements