translateZ 带来的Z-index 问题

今天遇到了一个问题,当一个3D变换元素translateZ这个属性的值为负值的时候,这个元素的Z-index就不会其作用,解决方法就是translateZ的值必须大于等于0才能让Z-index 起作用。

原因:太累了,想了想,translateZ这个属性的意思就是Z轴进行变换,可以理解为我们看到的3D物体都是有个旋转点的,我们能看到旋转点的前方的东西,就是Z>0,当Z<0的时候,就是物体在旋转点后面了,我们的眼睛当然看不到了。Z-index又是一个层叠。理论上来说Z-index越高的就越靠前显示,但是当你Z<0的时候,你这个物体都看不到了,何来谈Z-index 呢?这是我的仓促理解。有空再来整理。先记着

原文地址:https://www.cnblogs.com/strangerqt/p/3858923.html