如上图,在积分的数字元素上,使用了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. linux系统的启动过程简要分析

    接触linux系统运维已经好几年了,常常被问到linux系统启动流程问题,刚好今天有空来梳理下这个过程:一般来说,所有的操作系统的启动流程基本就是: 总的来说,linux系统启动流程可以简单总结为以下 ...

  2. dede后台添加优酷等视频iframe链接时被替换成了图片

     添加文章时 添加优酷视频 :<iframe height=498 width=510 src='http://player.youku.com/embed/XNDAzNTAzODE4OA==' ...

  3. python--随笔一

    1.format函数--根据关键字和位置选择性插入数据 In [11]: '{mingzi}jintian{dongzuo}'.format(mingzi='duzi',dongzuo='i love ...

  4. vbox+Vagrant 入门指南

    Vagrant 简介 Vagrant 是一个用来构建和管理虚拟机环境的工具.Vagrant 有着易于使用的工作流,并且专注于自动化,降低了开发者搭建环境的时间,提高了生产力.解决了"在我的机 ...

  5. 线程、进程、协程和GIL(一)

    参考链接:https://www.cnblogs.com/alex3714/articles/5230609.html https://www.cnblogs.com/work115/p/562027 ...

  6. Choosing Capital for Treeland CodeForces - 219D (树形DP)

    传送门 The country Treeland consists of n cities, some pairs of them are connected with unidirectional  ...

  7. Aizu:2200-Mr. Rito Post Office

    快递 Time limit 8000 ms Memory limit 131072 kB Problem Description 你是某个岛国(ACM-ICPC Japan)上的一个苦逼程序员,你有一 ...

  8. 11 Django组件-分页器

    Django的分页器(paginator) view from django.shortcuts import render,HttpResponse # Create your views here ...

  9. EVALUation mode running with code size limit:2k keil进行仿真过程中出现的报错

    EVALUation mode running with code size limit:2k 如果keil软件未破解,会限制程序的存储大小.第一是你的软件没有破解,不能编译2K以上的程序:这种情况下 ...

  10. 3670: [Noi2014]动物园

    题目链接 题意:给n个字符串,求出每个字符串的num值,加1后相乘.num[i]表示1~i中,有多少没有重叠的公共前缀后缀. 分析: kmp中p数组表示最大的公共前缀后缀.设一cnt数组,表示1~i中 ...