Syntax error Specify how nested elements are rendered in 3D space

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

163 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements