今天碰到了一个css3效果在pc端和安卓端都正常,但是ios端无法正常显示的问题。经过排查后发现是css3的transform动画效果里面的translate3d和z-index冲突导致的。
z-index是设置元素显示层级的也相当于是个Z轴,translate3d的Z轴也是表示层级的。如果两个参数都设置了不等于0的数值,那么会以Z轴值为准。这就导致了z-index值的失效。
解决办法就是留一个就行了。个人建议如果那个translate3d效果没什么特别的话直接用translate控制X轴和Y轴就行了,Z轴的用处我暂时还没发现...