指定如何在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>

以上是 指定如何在3D空间中渲染嵌套元素 的全部内容, 来源链接: utcz.com/z/316953.html

回到顶部