时间：2021-07-01 10:21:17 帮助过：31人阅读
css transform-style属性怎么用？
作用：transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。
语法：
- transform-style: flat|preserve-3d
说明：
flat 子元素将不保留其 3D 位置。
preserve-3d 子元素将保留其 3D 位置。
注释：
该属性必须与 transform 属性一同使用。
css transform-style属性使用示例
- <!DOCTYPE html>
- <html>
- <head>
- <style>
- #div1
- {
- position: relative;
- height: 200px;
- width: 200px;
- margin: 100px;
- padding:10px;
- border: 1px solid black;
- }
- #div2
- {
- padding:50px;
- position: absolute;
- border: 1px solid black;
- background-color: red;
- transform: rotateY(60deg);
- transform-style: preserve-3d;
- -webkit-transform: rotateY(60deg); /* Safari and Chrome */
- -webkit-transform-style: preserve-3d; /* Safari and Chrome */
- }
- #div3
- {
- padding:40px;
- position: absolute;
- border: 1px solid black;
- background-color: yellow;
- transform: rotateY(80deg);
- -webkit-transform: rotateY(-60deg); /* Safari and Chrome */
- }
- </style>
- </head>
- <body>
- <div id="div1">
- <div id="div2">HELLO
- <div id="div3">YELLOW</div>
- </div>
- </div>
- </body>
- </html>
效果输出：
以上就是css transform-style属性怎么用的详细内容，更多请关注Gxl网其它相关文章！