translateZ 带来的Z-index 问题

最新推荐文章于 2023-09-10 19:02:45 发布

weixin_30484739

最新推荐文章于 2023-09-10 19:02:45 发布

阅读量545

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/strangerqt/p/3858923.html

本文探讨了在CSS 3D变换中translateZ属性值为负数时对元素Z-index的影响，并提供了解决方案，即确保translateZ的值大于等于0以使Z-index生效。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天遇到了一个问题，当一个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