如上图,在积分的数字元素上,使用了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. 线段树的应用xx中学模拟lites

    跟昨天那个自己写的,没有按照模板来的一看风格就不相类似,今天模拟赛的时候就是用的我的那个自己YY的代码,才拿了10分.个人认为关键的问题应该在于对于数据的处理太过繁琐了,所以回来之后,就拿了大佬的程序 ...

  2. 【思维题 细节】loj#6042. 「雅礼集训 2017 Day7」跳蚤王国的宰相

    挂于±1的细节…… 题目描述 跳蚤王国爆发了一场动乱,国王在镇压动乱的同时,需要在跳蚤国地方钦定一个人来做宰相. 由于当时形势的复杂性,很多跳蚤都并不想去做一个傀儡宰相,带着宰相的帽子,最后还冒着被打 ...

  3. python-读写文件的方式

    open(path, flag[, encoding][, errors]) path:要打开文件的路径 flag:打开方式 r 以只读的方式打开文件,文件的描述符放在文件的开头 rb 以二进制格式打 ...

  4. angular常见问题总结

    本文引自:https://www.cnblogs.com/zhoulujun/p/8881414.html 这篇是对angularJS的一些疑点回顾,是对目前angularJS开发的各种常见问题的整理 ...

  5. InteliJ IDEA 设置eclipse快捷键

    从使用eclipse切换到intellij idea开发工具常常会伴随这快捷切换的困扰,今天写到将intellij idea快捷键设置为eclipse快捷的方式 步骤如下: file -> se ...

  6. zookeeper集群(二)

    经过前一篇文章<zookeeper伪集群一>的阅读,相信大家对zookeeper集群已经有一定的了解了,接下来我们再谈谈zookeeper真集群.其实真集群和伪集群还是有很多相似的部分的, ...

  7. 14、函数之匿名函数(lambda)

    关键字lambda可以创建匿名函数,语法是:lambda 参数s :表达式.匿名函数与普通函数只有以下几点不同:①没有函数名:②只能有一个表达式:③一定会有返回值,返回值就是该表达式的结果. 另外,匿 ...

  8. perl语言入门总结-第3章-列表与数组

    1-列表list指的是标题的有序集合, 而数组(array)则是存储列表的变量. 更精确地说,列表指的是数据,而数组指的是变量. 访问数组中的元素 ] = "yabba"; ] = ...

  9. 笔记-mysql-管理及基础操作

    笔记-mysql使用-管理及基础操作 1.      简介 mysql是一个免费的关系型数据库,不过好像被oracle收购了.... 希望它继续免费. 1.1.    相关术语 数据库,表,列,行,冗 ...

  10. TouTiao开源项目 分析笔记5

    1.深入理解RxJava 1.1.基本上现在的APP都会有请求网络,然后处理回调的业务吧. 如果请求的数据很多,业务越来越复杂,怎么处理呢? 这里我用到了RxJava来帮我处理业务. RxJava主要 ...