作用：设置元素的子元素是位于3D空间中还是平面中
属性名：transform-style
属性值：
- flat：子级处于平面中
- preserve-3d:子级处于3D空间
步骤：
- 父级元素添加 transform-style:preserve-3d
- 子级定位
- 调整子盒子的位置（位移或旋转）
演示：
<style>
.cube {
width: 200px;
height: 200px;
margin: 100px auto;
background-color: rgb(106, 220, 116);
transition: all 2s;
}
.cube div {
width: 200px;
height: 200px;
}
.front {
background-color: #2180d4;
}
.back {
background-color: #dd1e1e;
}
</style>
</head>
<body>
<div class="cube">
<div class="front"></div>
<div class="back"></div>
</div>
</body>
按照步骤父级添加 transform-style: preserve-3d;为了更好的视觉效果我又添加了视距transform-style: preserve-3d;然后根据子绝父相原则给它们定位，最后transform: translateZ(80px)将两个盒子分开，添加一个旋转的效果使其更明显。
<style>
.cube {
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
background-color: rgb(106, 220, 116);
transition: all 2s;
transform-style: preserve-3d;
transform-style: preserve-3d;
}
.cube div {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
}
.front {
background-color: #2180d4;
transform: translateZ(80px);
}
.back {
background-color: #dd1e1e;
}
.cube:hover {
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="cube">
<div class="front">前面</div>
<div class="back">后面</div>
</div>
</body>
