GreenSock动画z-index问题：旗帜需显示于菱形上方而非下方

嘿，这个问题我之前也踩过坑！当你开启了perspective和transformStyle:"preserve-3d"的3D变换上下文后，普通的z-index就彻底失效了——因为此时元素的堆叠顺序是由它们在3D空间中的translateZ值决定的，CSS的平面z-index规则会被浏览器忽略。

具体解决方案 #

给右侧飞出的「旗帜」元素设置一个比菱形更高的translateZ值，让它在3D空间里处于菱形的前方：

• 假设你的旗帜类是.flag，可以在初始化阶段就加上这个设置：

// 把旗帜固定在3D空间的靠前位置
TweenLite.set(".flag", {translateZ: 10});

如果你的菱形元素本身也有translateZ配置，只要保证旗帜的translateZ数值比菱形的大就行（比如菱形是translateZ(0)，旗帜设translateZ(5px)以上就足够）。

为什么z-index没用？ #

当父元素开启perspective，且子元素设置了transformStyle:"preserve-3d"时，浏览器会创建一个独立的3D渲染上下文，所有子元素的前后关系完全由Z轴位置决定，平面堆叠的z-index规则不再适用。只有调整元素的translateZ值，才能改变它们在3D空间中的层级顺序。

额外检查点 #

确保菱形和旗帜都处于同一个transformStyle:"preserve-3d"的父容器下，这样它们的3D空间位置才能被正确计算和对比。

内容的提问来源于stack exchange，提问作者danzo