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 ...
随机推荐
- Centos 7 下安装mysql
// 卸载原有maridb-lib库 [root@localhost ~]# rpm -qa | grep mariadb mariadb-libs-5.5.41-2.el7_0.x86_64 [ro ...
- Unexpected exception parsing XML document from ServletContext resource [/WEB-INF/config/springdemo-config.xml]
org.springframework.beans.factory.BeanDefinitionStoreException: Unexpected exception parsing XML doc ...
- kivy学习一:安装kivy模块
现在是看脸的时代,一个程序没有一个漂亮的UI,就像一个深闺中的美女没人欣赏. 当然作为一个小小.............白,没有那么高的要求,当前要先有脸是不? 首选python自家的模块tkinte ...
- gcc常用语法
1. gcc -E source_file.c-E,只执行到预编译.直接输出预编译结果. 2. gcc -S source_file.c -S,只执行到源代码到汇编代码的转换,输出汇编代码. 3. g ...
- 13-在Core Mvc中使用Options
配制文件appsettings和Classes来自12节 在HomeController增加如下代码,使用IOption方式进行注入 public class HomeController : Con ...
- 笔记-docker-1
笔记-docker-1 1. 简介 1.1. 什么是Docker? Docker 是世界领先的软件容器平台.开发人员利用 Docker 可以消除协作编码时“在我的机器上可正常工作”的问 ...
- Oozie 实战之 shell
说明:使用 shell action 执行 shell 脚本 hive-select-test.sh 来通过已经配置好的 Hive -f 来执行 HQL 查询脚本文件 select.sql 1.创建脚 ...
- PHP.TP框架下商品项目的优化1-时间插件、鼠标所在行高亮、布局规划页面
1.优化搜索表单中按时间搜索的功能 添加一个时间插件datetimepicker,在lst.html中,注意要导入jquery.min.js,此处从前文的在线编辑器中导入 <!-- 导入 --& ...
- Maven系列之快速入门
文章结构 唯快不破---Maven快速入门 稳打稳扎---Maven核心知识 实用为先---Maven如何建立Web项目 1 唯快不破---Maven快速入门 1.1 Maven项目 ...
- Android stadio 模板 liveTemplate不管用
今天自己弄了模板,发现不生效.后来才知道要在下面设置在哪里应用:如下图: Android satdio 制作自己的todo 有时候,别人都使用todo,使得自己个人的todo不好用了.那么怎么弄?自己 ...