如上图，在积分的数字元素上，使用了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. Cluster - HA -keepalived

    学习须知 VRRP:https://www.cnblogs.com/aftree/p/9376427.html 需求 集群中,对后端RealServer的状态做检测,实现自动化问题检测和问题自动处理机 ...

  2. rsync同步备份搭建

    Rsync 是 Unix/Linux 下的一款应用软 在平常的运维中进常要对一些数据进行备份,以防止意外的服务器故障导致不可避免的后果,tar,cp只能适应一些小范围backup,对于几T甚至几P的数 ...

  3. LInux操作随手笔记

    一.find 的用法 实例 find / -name test.txt 就可以找到这个文件的路径(如果存在). 二.学用vi编辑器,学用rz往linux服务器上面上传文件 linux中rz 和 sz ...

  4. MYSQL SQL高级查询技巧

    1.UNION,EXCEPT,INTERSECT运算符 A,UNION 运算符 UNION 运算符通过组合其他两个结果表(例如 TABLE1 和 TABLE2)并消去表中任何重复行而派生出一个结果表. ...

  5. Makefile (1) gcc基础

    .c(源文件) --> .i(预处理文件) -->.s(汇编文件) --> -o(目标文件) -->可执行文件 ​ .c --预处理-->.i .i --编译--> ...

  6. java8之list集合中取出某一属性的方法

    上代码 List<User> list = new ArrayList<User>(); User user1 = new User("第一位"," ...

  7. rpm、yum命令

    一.rpm命令 挂载光盘文件到/media目录: 进去/media目录下的Packages目录: 查看系统已安装的所有rpm包: 查看系统是否安装dhcp软件包: 安装dhcp软件包: 查看dhcp软 ...

  8. JVM——九大工具助你玩转Java性能优化

    本文转载自 http://www.importnew.com/12324.html 本文由 ImportNew - 陈 晓舜 翻译自 idrsolutions.欢迎加入翻译小组.转载请参见文章末尾的要 ...

  9. 2599: [IOI2011]Race

    2599: [IOI2011]Race 链接 分析 被memset卡... 点分治,对于重心,遍历子树,记录一个数组T[i],表示以重心为起点的长度为i的路径中最少的边数是多少.然后先遍历子树,更新答 ...

  10. bootstrap设计横线上加字

    1.给横线上加字 . 2.思路:通过z-index实现,可以将父元素的z-index设置成2,而横线的z-index设置成-1,这样有字的地方就可以覆盖横线,再设置字的padding达到合理的宽度 ( ...