提供zblog模板_zblog主题_wordpress模板的下载和定制

translate3d和z-index冲突导致z-inde值无效的解决办法

天兴工作室 2021-01-10 09:51 教程 2279 0 评论


今天碰到了一个css3效果在pc端和安卓端都正常,但是ios端无法正常显示的问题。经过排查后发现是css3的transform动画效果里面的translate3d和z-index冲突导致的。

translate3d和z index冲突导致z inde值无效的解决办法 z index translate3d transform 教程 第1张

z-index是设置元素显示层级的也相当于是个Z轴,translate3d的Z轴也是表示层级的。如果两个参数都设置了不等于0的数值,那么会以Z轴值为准。这就导致了z-index值的失效。

解决办法就是留一个就行了。个人建议如果那个translate3d效果没什么特别的话直接用translate控制X轴和Y轴就行了,Z轴的用处我暂时还没发现...


没有找到能解决你问题的教程?

您可以试着搜索一下或者直接在线提问。我们也提供收费技术支持,有需要可以在线联系我们。

在线提问 在线客服

欢迎 发表评论: 取消回复

请填写验证码
  • 最新文章
  • 热文排行
  • 最多评论
标签聚合
  • 登 录
  • 注册账号 忘记密码?
  • 注 册
  • 已有账号?直接登录 忘记密码?
  • 社交账号登录