transform-style 属性指定子元素在三维 (3D) 空间中的呈现方式。
此属性是 CSS3 属性之一。
它仅适用于转换属性。
transform-style 属性有两个值：flat 和 preserve-3d。
如果设置了“flat”值，则元素的子元素将不会单独存在于 3D 空间中。
为了获得最大的浏览器兼容性扩展，例如 -webkit- 用于 Safari、Google Chrome 和 Opera（较新版本）与此属性一起使用。
| 初始值 | flat |
|---|---|
| 应用于 | 可变形元素。 |
| 继承 | 无效 |
| 可动画的 | 无效 |
| 版本 | CSS3. |
| DOM 语法 | object.Style.TransformStyle =“Flat”; |
CSS transform-style 属性值说明
| 值 | 描述 |
|---|---|
| flat | 定义元素的子项不会定位三维空间。这是此属性的默认值。 |
| preserve-3d | 定义元素的子项将定位在三维空间中。 |
| initial | 将此属性设置为其默认值。 |
| inherit | 从其父元素继承此属性。 |
语法
transform-style: flat | preserve-3d | initial | inherit;
变换样式属性的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
#element {
position: relative;
height: 250px;
width: 250px;
margin: 50px;
padding: 10px;
border: 2px solid #666666;
background-color: #eeeeee;
}
#element1 {
padding: 50px;
position: absolute;
border: 2px solid #000000;
background-color: #8ebf42;
-webkit-transform: rotateY(50deg);
-webkit-transform-style: preserve-3d;
transform: rotateY(50deg);
transform-style: preserve-3d;
}
#element2 {
padding: 50px;
position: absolute;
border: 2px solid #000000;
background-color: #1c87c9;
-webkit-transform: rotateY(-100deg);
transform: rotateY(-100deg);
}
</style>
</head>
<body>
<h2>Transform-style 属性示例</h2>
<div id="element">
<div id="element1">
Green
<div id="element2">Blue</div>
</div>
</div>
</body>
</html>
具有 "flat" 值的 transform-style 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
.element {
position: relative;
height: 250px;
margin: 50px;
padding: 10px;
border: 2px solid #cccccc;
background-color: #eeeeee;
}
.element1 {
margin: 20px;
border: 1px dotted;
height: 150px;
width: 150px;
background-color: green;
transform: rotateX(15deg);
transform-style: flat;
}
.element2 {
margin: 20px;
border: 1px dotted;
height: 200px;
width: 200px;
background-color: lightgreen;
transform: rotateX(45deg);
}
</style>
</head>
<body>
<h2>Transform-style 属性示例</h2>
<div class="element">
<div class="element1">
Green
<div class="element2">Blue</div>
</div>
</div>
</body>
</html>
日期：2020-06-02 22:14:50 来源：oir作者：oir