如上图,在积分的数字元素上,使用了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. Java分享笔记:FileOutputStream流的write方法

    /*------------------------ FileOutputStream: ....//输出流,字节流 ....//write(byte[] b)方法: 将b.length个字节从指定字 ...

  2. JAVAOOP集合框架

    集合框架三大内容:对外的接口.接口的实现和对集合运算的算法 集合有三大类接口:List.Set.Map 共同点:都是集合接口,都可以用来存储很多对象 不同:Collection接口存储一组不唯一(允许 ...

  3. jquery 配合 ajax 完成 在线编辑 你值得拥有

    思路分析: 将 table中的表格 改变成为 input表格框获得值 ajax配合修改 删除 <?php use yii\helpers\Url; $web = Url::base(); ?&g ...

  4. POJ 1854 贪心(分治)

    Evil Straw Warts Live Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 1144   Accepted:  ...

  5. Android 懒加载简单介绍

    1.懒加载介绍 1.1.效果预览 1.2.效果讲解 当页面可见的时候,才加载当前页面. 没有打开的页面,就不会预加载. 说白了,懒加载就是可见的时候才去请求数据. 1.3.懒加载文章传送门 参考文章: ...

  6. poj2001Shortest Prefixes(trie)

    Shortest Prefixes Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 18687   Accepted: 808 ...

  7. textView代码设置文字居中失效 textView设置文字居中两种方法

    1.TextView的高度占据整个父控件的高度,然后设置TextView的Grayvity Center就可以了. 2.如果第一个方法不行,那么,textView的高度设置为warp_content, ...

  8. erlang中的原子(atom)内部实现[转]

    转自: http://www.kongqingquan.com/archives/208#more-208 Erlang中的atom由通用hash表实现,虚拟机中atom最终的用数值表示,对应表中的下 ...

  9. RedHatEnterpriseLinuxServerRelease7.3上配置vsftpd服务器

    0.vsftpd与ftp安装 yum install -y vsftpd ftp 1.vsftpd 服务启停相关命令 systemctl start vsftpd systemctl stop vsf ...

  10. 新兵易学,老兵易用----C++(C++11的学习整理---如何减少代码量,加强代码的可读性)

    1.auto类型推导 auto推导最大的优势就是在拥有初始化表达式的复杂类型变量声明时简化代码. auto第二个优势就是免去了程序员在一些类型声明时的麻烦,或者避免一些在类型声明时的错误. auto第 ...