zoukankan      html  css  js  c++  java
  • Safari 3D transform变换z-index层级渲染异常的研究

    一、问题:

    问题背景:在写H5的时候,因为要使z-index:0的红旗这张图片达到飘摇的动效,所以需要加transform:rotateX()rotateY()进行角度旋转转换;

    问题出现:动效是有了,但是层级感觉变了,有种变成了z-index:无穷大 的感觉,z-index好像已经失效了。

    二、思路:

    知道是层级的问题,就找和z-index差不多作用的,此时transform: translateZ()应该是最佳的选择。

    三、解决:

    把红旗这张图片遮住的图层,添加上transform: translateZ(数值看着给)这个样式,就OK了。
    ————————————————
    版权声明:本文为CSDN博主「zhl_cafe_noir」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/zhl_cafe/article/details/73613802

    另外方法:
    1、transform:scale(0.95) rotateY(60deg); 这样写就不会被覆盖了以此类推
    2、但是需要在父元素上添加 transform-style: preserve-3d;

    https://www.jianshu.com/p/00cde297dc4e

  • 相关阅读:
    map & reduce
    Generator
    切片
    函数参数
    Dict & Set
    list,tuple
    selenium鼠标和键盘操作
    selenium元素定位以及点击事件
    css定位
    xpath
  • 原文地址:https://www.cnblogs.com/xiaozhumaopao/p/12575747.html
Copyright © 2011-2022 走看看