如上图,在积分的数字元素上,使用了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. SEOer必读:50个网站推广方法

    1.论坛推广 这里所说的论坛推广绝对不是在论坛里一个一个版贴广告,也不是将网站地址加在签名里然后疯狂刷屏,那样既耗费精力而且效果也不见得好,论坛管理员只要点几下鼠标就能将你的帖子全部删除,顺便封掉你的 ...

  2. Redis ---------- key的操作

    key命名规则 除空格和\n,其他都可以 select   db -index选择数据库 例1  select   5 例2 type 查看数据key类型 type name 例3  keys pat ...

  3. day1_作业(账户登录检测)

    #!/usr/local/bin/python3 # -*- coding:utf-8 -*- f=open('/users/zhangyu/PycharmProjects/s14/day1/Home ...

  4. [Luogu3806]点分治

    询问树上是否存在距离为k[i]的点对 直接点分治把所有距离预处理出来,然后O(1)回答即可 Code #include <cstdio> #include <algorithm> ...

  5. urllib使用二

    urlopen方法返回一个html 对html使用info()方法返回HTTPMessage对象实例 import urllib def print_list(lists): for i in lis ...

  6. 笔记-python-调试

    笔记-python-调试 一般在pycharm下调试或使用log查看输出日志,有时小程序不想这么麻烦,也有一些方便使用的调试方式可以使用. 1.      idle调试 1.打开Python shel ...

  7. 笔记-scrapy-setting

    笔记-scrapy-setting 1.     简介 Scrapy设置允许您自定义所有Scrapy组件的行为,包括核心,扩展,管道和蜘蛛本身. 可以使用不同的机制来填充设置,每种机制都有不同的优先级 ...

  8. python基础之模块part1

    模块: 模块本质上就是一个Python程序. 所有说是对象的,一定可以通过  对象.方法  来实现某些操作. 模块种类: 内置模块 第三方模块 自定义模块 import在查找模块的顺序:内置模块--- ...

  9. TouTiao开源项目 分析笔记8 图解分析数据加载方式

    1.整体构架 1.1.以一个段子页面为例,列出用到的主要的类,以图片的方式展示. 1.2.基础类 这里最基础的接口有:   IBaseView<T>==>定义了5个方法. 然后最基础 ...

  10. [bzoj1552][Cerc2007]robotic sort&&[bzoj3506][Cqoi2014]排序机械臂

    非常垃圾的一道平衡树,结果被日了一天.很难受嗷嗷嗷 首先不得不说网上的题解让我这个本来就不熟悉平衡树的彩笔很难受——并不好理解. 还好Sinogi大佬非常的神,一眼就切掉了,而且用更加美妙的解法. 题 ...