作用：设置元素的子元素是位于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>
