Home > Article > Web Front-end > Specifies how nested elements are rendered in 3D space

Specifies how nested elements are rendered in 3D space

WBOYforward: 2023-09-02 12:57:02696browse

指定如何在 3D 空间中渲染嵌套元素

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

You can try running the following code to implement the transform-style attribute:

Example

Live Demonstration

<!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>

The above is the detailed content of Specifies how nested elements are rendered in 3D space. For more information, please follow other related articles on the PHP Chinese website!

css transform

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：How to apply multiple transform properties to an element using CSS?Next article：How to apply multiple transform properties to an element using CSS?

See more

Specifies how nested elements are rendered in 3D space

Example

Related articles