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

ID:13318 / 打印

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

要指定如何在 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>
上一篇: 如何使用CSS创建来电动画效果?
下一篇: CSS @charset 规则的用法

作者:admin @ 24资源网   2024-10-18

本站所有软件、源码、文章均有网友提供,如有侵权联系308410122@qq.com

与本文相关文章

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。