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:


Live Demo

<!DOCTYPE html>
         .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;

      <div class = "demo1">Demo
         <div class = "demo2">Demo
            <div class = "demo3">

Updated on: 23-Jun-2020


Kickstart Your Career

Get certified by completing the course

Get Started