如上图,在积分的数字元素上,使用了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. Centos7上搭建activemq集群和zookeeper集群

    Zookeeper集群的搭建 1.环境准备 Zookeeper版本:3.4.10. 三台服务器: IP 端口 通信端口 10.233.17.6 2181 2888,3888 10.233.17.7 2 ...

  2. 【CodeBase】PHP将数组键名转成变量名

    <?php /** * php 把数组中的键名所为变量名键值作为变量名 */ $arr=array('a'=>1,'b'=>2,'c'=>3,'d'=>5,'e'=> ...

  3. Oracle导入导出.sql、.dmp文件

    Oracle导出导入表(.sql..dmp文件)两种方法 提示:在导入sql和dmp文件之前,先建立用户,指明表空间.其中要注意用户名和表空间最好跟sql文件中的一样. 建表空间授权参考 :http: ...

  4. php - empty() is_null() isset()的区别

    empty():当变量存在,并且是一个非空非零的值时,返回 FALSE,否则返回 TRUE. is_null():如果指定变量为 NULL,则返回 TRUE,否则返回 FALSE. isset():如 ...

  5. C语言实例解析精粹学习笔记——26

    实例26:阿拉伯数字转换为罗马数字,将一个整数n(1~9999)转换为罗马数字,其中数字和罗马数字的对应关系如下: 原书中的开发环境很老,我也没有花心思去研究.自己在codeblocks中进行开发的, ...

  6. 一个比较良好的flask项目结构

    一个比较良好的flask项目结构 project/ app/                    # 整个程序的包目录 static/                 # 静态资源文件 js/    ...

  7. Maven系列之快速入门

    文章结构 唯快不破---Maven快速入门 稳打稳扎---Maven核心知识 实用为先---Maven如何建立Web项目  1   唯快不破---Maven快速入门       1.1 Maven项目 ...

  8. Servlet过滤器---简介

    过滤器的基本概念 Servlet过滤器从字面上的字意理解为经过一层次的过滤处理才达到使用的要求,而其实Servlet过滤器就是服务器与客户端请求与响应的中间层组件,在实际项目开发中Servlet过滤器 ...

  9. [工具使用]xshell 中“快速命令集”的使用

    突然看到朋友的xshell比我多一个按钮,且一点,哈哈哈 ,实现了很炫酷的功能,耐不住好奇,问了一句,原来是快速命令集! 1.选择快速命令集(两种方法a&b) a:文件 > 属性 > ...

  10. 解决不了bug的时候看一下:

    解决不了bug的时候看一下: 1.机器是不会出错的,出错的一定是人.只是你还没有意识到哪里出了错. 2.产生bug 的原因想错了,你以为是系统的bug ,那么你肯定就不想着去解决,你也就解决不了. 这 ...