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

百变鹏仔 4周前 (09-20) #CSS

文章标签嵌套

要指定如何在 3D 空间中呈现嵌套元素，请使用 CSS 中的 transform-style 属性。

您可以尝试运行以下代码来实现transform-style属性：

示例

现场演示

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

文章推荐

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

示例

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写