如上图,在积分的数字元素上,使用了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. 【学时总结】◆学时·VI◆ SPLAY伸展树

    ◆学时·VI◆ SPLAY伸展树 平衡树之多,学之不尽也…… ◇算法概述 二叉排序树的一种,自动平衡,由 Tarjan 提出并实现.得名于特有的 Splay 操作. Splay操作:将节点u通过单旋. ...

  2. SpringMVC使用ModelAndView的相对路径和绝对路径的问题

    例如:abc/a/a.jsp,想要跳转到根目录的b.jsp 使用 ModelAndView 跳转, 若引用:org.springframework.web.portlet.ModelAndView 这 ...

  3. dts--tests(三)

    sample_built.py """ DPDK Test suite. Test sample_built. """ import uti ...

  4. Nginx 配置继承模型

    要了解nginx的继承模型,首先需要知道nginx使用多个配置块进行操作.在nginx中,这样的块被称为上下文,例如,放置在服务器上下文中的配置指令驻留在server { }块中,就像放置在http上 ...

  5. PHP递归操作

    对于php的递归操作解释说明,递归基本上是学习每种语言都要会的最基本的操作.来吧,下面是我闲的时候随便写的一个对数组进行遍历操作的一个递归函数. 原理很简单,递归就是在一个函数里面调用自身的一种机制. ...

  6. Python学习-django-Model操作

    Django之Model操作   一.字段 AutoField(Field) - int自增列,必须填入参数 primary_key=True BigAutoField(AutoField) - bi ...

  7. R-biomaRt使用-代码备份

    目标:使用R脚本从ensembl上下载transcript数据 简单粗暴,直接上代码.biomaRt的介绍晚一点更新. # this file helps extract information fr ...

  8. 7 Django分页器文章分页

    1.复习 2.这节课要解决的问题? 3.分页的原理 4.准备工作 (1)创建Django项目 C:\Users\Administrator\Desktop\root3>django-admin ...

  9. 安测云验证有CTA问题

    背景: 现在所有的app 都需要通过工信部的审核.用户不同意之前,不能联网. 那么,我怎么知道自己的应用有没有联网呢?那么多sdk ,那么多代码?我怎么测试呢? 哈哈,我们测试给的方法真的很管用. l ...

  10. notepad++ 换行技巧 log换行

    有时候,服务器收集上来的日志,格式很乱,看log很难,如下: java.lang.IllegalStateException: BEvent.init() must be call first\n\t ...