啥是transform-style？

哦， transform-style啊，就是那种Neng让东西变来变去的魔法，就像动画片里的一样。这玩意儿属性Neng让你的网页元素变成3D的，就像真实的立在那儿一样！

开启3D效果：preserve-3d巨大法

先说说 你需要给元素加上一个名叫"preserve-3d"的属性，就像这样：

/* 开启3D效果 */
.container {
    transform-style: preserve-3d;
}

这样，里面的子元素就Neng开头玩3D游戏了！

层次感满满：translateZ和z-index

为了让元素在Z轴上有点层次感， 我们需要给子元素加上一个叫translateZ的属性，让它有点厚度。然后我们再用z-index来控制它们的堆叠顺序。

比如 我们想让红色盒子在Zui前面绿色盒子在再说说面：

/* 红色盒子在前 */
.box1 {
    height: 100px;
    width: 100px;
    background-color: red;
    transform: translateZ;
    position: absolute;
    z-index: 1;
}
/* 绿色盒子在再说说 */
.box3 {
    height: 100px;
    width: 100px;
    background-color: green;
    transform: translateZ;
    position: absolute;
    z-index: 3;
}

祖先元素hen关键：不要忘了父元素

Ru果你把父元素的preserve-3d属性拿掉，子元素的3D效果就会消失，就像没有施魔法一样。所以想起来给你的父元素加上transform-style: preserve-3d;哦！