transform perspective的层级问题

如上图,在积分的数字元素上,使用了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的层级问题的更多相关文章
- Safari 3D transform变换z-index层级渲染异常的研究
by zhangxinxu from http://www.zhangxinxu.com/wordpress/?p=5569 一.Safari是新时代的IE6 在2年前介绍currentColor变量 ...
- Safari 3D transform变换z-index层级渲染异常
(猛戳来源:http://www.zhangxinxu.com/wordpress/?p=5569)
- perspective结合transform的3D效果
http://css-tricks.com/almanac/properties/p/perspective/ 链接中讲了 perspective的两种用法及比较: 1.perspective:100 ...
- z-index和transform
z-index和transform是CSS中的属性,但很少同学将二者联系到一起,感觉他们八杆子打不上.事实真的是这样吗?如果你也不能确认,这篇文章就值得你花点时间阅读.因为阅读完了,你会有所收获的. ...
- 小心transform
张老师总结的,感谢! <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- z-index和transform,你真的了解吗?
z-index和transform是CSS中的属性,但很少同学将二者联系到一起,感觉他们八杆子打不上.事实真的是这样吗?如果你也不能确认,这篇文章就值得你花点时间阅读.因为阅读完了,你会有所收获的. ...
- css3 perspective perspective-origin属性的理解
perspective字面意思是:透视. 在w3school中它的解释为:设置元素被查看位置的视图:通俗讲,就是我们看看一个物体的所处的视角,近大远小.就比如我们正对着电脑:当我无限贴近电脑屏幕的时候 ...
- CSS3动画属性Transform解读
无论你是前端还是设计师,相信你在网页二维空间上的操作早已经得心应手,JS处理时间线的动画也早已经 烂熟于胸.从今天开始,我跟大家分享一些“新”的东西,网页的第三个维度,以及纯CSS实现的动画.限于篇幅 ...
- css3 视距-perspective
视距-用来设置用户与元素3d空间Z平面之间的距离. 实例1: HTML: <div class="perspective"> <h3&g ...
随机推荐
- 基础篇(1):c++程序基本结构
本人是初中生,原用Pascal语言,现转c++,所以写几篇博客,分享一下. 补一句,我是一边转c++一边写博客,所以可能会有错误,望过路大神能指出. 参考书籍:<信息学奥赛一本通>< ...
- dts--framework(三)
tester.py class Tester(Crb) 00. __init__(self, crb, serializer) 01.init_ext_gen(self) 02.set_re_run( ...
- POJ:1064-Cable master
Cable master Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 58613 Accepted: 12231 Descri ...
- java_servlet
在servlet 解决中文乱码 response.setContentType("text/html;charset=utf-8"); //必须在getWrite()上面,不然依然 ...
- 点击EditText可编辑,点击其他地方不可编辑
我是在Fragment中实现的,在网上查了,有的说要回调Activity的onTouch事件,通过实验直接在Fragment中即可.如下: 我的EditText在ScrollView,因为Scroll ...
- SpringMVC---四大注解
SpringMVC四大注解 Component 通用标注,在不清楚使用哪个注解的时候,可以使用Component通用注解 Controller 标注web请求控制器 Service 标注Service ...
- SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID
如题: SDK location not found. Define location with sdk.dir in the local.properties file or with an AND ...
- 内存泄漏分析 mat 使用 activity泄漏
https://github.com/square/leakcanary square 公司出品 mat 下载地址: http://pan.baidu.com/s/1kVPoIxx 两天,一个内存泄漏 ...
- Java-JNA使用心得2
自5月初第一次尝试使用Java封装调用C的dll之后,已经先后经历了3次小项目了. 上月末是最近的一次项目实际,任务来的急时间又少,还好在加班加点后还是完成了任务,并把第二次没有实现的功能给实现了(C ...
- str_replace字符串替换
字符串替换, src 源字符串, buf_size 缓冲大小, search搜索的字符串大小, repstr 需要替换成的字符串 int str_replace(char *src, unsigned ...