如上图，在积分的数字元素上，使用了transform perspective，其层级就穿透了上面的遮罩层，关键代码如下：

.mask {

　　position: fixed;

　　z-index:;

}

.flip {

　　transform: perspective(400px) rotateX(40deg);

}

具体解决方法：

1. 在有perspective的元素的任意父级添加overflow:hidden;

2. 在layer元素上添加transform:translateZ(500px)，500px是一个足够大的值即可，具体可尝试一下

具体内容可以参考张鑫旭的博客：http://www.zhangxinxu.com/wordpress/2016/08/safari-3d-transform-z-index/

transform perspective的层级问题的更多相关文章

  1. Safari 3D transform变换z-index层级渲染异常的研究

    by zhangxinxu from http://www.zhangxinxu.com/wordpress/?p=5569 一.Safari是新时代的IE6 在2年前介绍currentColor变量 ...

  2. Safari 3D transform变换z-index层级渲染异常

    (猛戳来源:http://www.zhangxinxu.com/wordpress/?p=5569)

  3. perspective结合transform的3D效果

    http://css-tricks.com/almanac/properties/p/perspective/ 链接中讲了 perspective的两种用法及比较: 1.perspective:100 ...

  4. z-index和transform

    z-index和transform是CSS中的属性,但很少同学将二者联系到一起,感觉他们八杆子打不上.事实真的是这样吗?如果你也不能确认,这篇文章就值得你花点时间阅读.因为阅读完了,你会有所收获的. ...

  5. 小心transform

    张老师总结的,感谢! <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  6. z-index和transform,你真的了解吗？

    z-index和transform是CSS中的属性,但很少同学将二者联系到一起,感觉他们八杆子打不上.事实真的是这样吗?如果你也不能确认,这篇文章就值得你花点时间阅读.因为阅读完了,你会有所收获的. ...

  7. css3 perspective perspective-origin属性的理解

    perspective字面意思是:透视. 在w3school中它的解释为:设置元素被查看位置的视图:通俗讲,就是我们看看一个物体的所处的视角,近大远小.就比如我们正对着电脑:当我无限贴近电脑屏幕的时候 ...

  8. CSS3动画属性Transform解读

    无论你是前端还是设计师,相信你在网页二维空间上的操作早已经得心应手,JS处理时间线的动画也早已经 烂熟于胸.从今天开始,我跟大家分享一些“新”的东西,网页的第三个维度,以及纯CSS实现的动画.限于篇幅 ...

  9. css3 视距-perspective

           视距-用来设置用户与元素3d空间Z平面之间的距离. 实例1:       HTML: <div class="perspective"> <h3&g ...

随机推荐

  1. BZOJ1509: [NOI2003]逃学的小孩(树的直径)

    Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 1126  Solved: 567[Submit][Status][Discuss] Description ...

  2. .NET向WebService传值为decimal、double、int、DateTime等非string类型属性时，服务器端接收不到数据的问题

    最近在做CRM项目时,使用C#调用SAP PI发布的WebService服务时遇到的问题: 向WebService传值为decimal.double.int.DateTime等非string类型数据时 ...

  3. mysql 创建用户、授权、修改密码

    以下操作都要在mysql所在机器操作 一.创建用户 CREATE USER 'dog'@'localhost' IDENTIFIED BY '123456'; 或 insert into mysql. ...

  4. TCP/IP协议之http和https协议

    一.TCP/IP协议 TCP/IP 是不同的通信协议的大集合. 1.TCP - 传输控制协议 TCP 用于从应用程序到网络的数据传输控制. TCP 负责在数据传送之前将它们分割为 IP 包,然后在它们 ...

  5. 特殊sql查询方法实例

    一.if条件查询:SELECT sum(if(is_buy > 0 ,1,0)) AS friend_count_all_cj, sum(if(is_buy = 0 ,1,0)) AS frie ...

  6. Python全栈day 03

    Python全栈day 03 一.运算符补充 in ,逻辑运算符,判断某字符或某字符串是否在一个大的字符串中,输出得到bool型数据. value = '我是中国人' v = '我' if v in ...

  7. Hive 压缩技术Data Compression

    Mapreducwe 执行流程 :input > map > shuffle > reduce > output 压缩执行时间,map 之后,压缩,数据存储在本地磁盘,减少磁盘 ...

  8. python协程和IO多路复用

     协程介绍                                                                                                ...

  9. shell参数 传递

    $# 是传给脚本的参数个数 $0 是脚本本身的名字 $1 是传递给该shell脚本的第一个参数 $2 是传递给该shell脚本的第二个参数 $@ 是传给脚本的所有参数的列表 $* 是以一个单字符串显示 ...

  10. .NET非常棒的开源项目，给你意想不到的东西！

    http://www.cnblogs.com/Leo_wl/p/4560146.html