关于 CSS3 backface-visiable 与 overflow 属性的冲突
最近在做一个 flip 效果的时候发现一个奇怪的问题,设置了 backface-visiable:hidden;overflow:hidden 的元素反转180度以后背面没有被隐藏,最终还是被Google出来了,overflow会覆盖transform-style: preserve-3d属性,还有以下一些元素会导致transform-style: preserve-3d失效:
Don't set overflow: hidden on elements with 3D transformed children
DESCRIPTION
The 'back' face of the card has a rotateY(180deg)
set on it. Both faces have backface-visibility: hidden
set. Setting overflow: hidden on their parent (the card) causes the 3D transformed face ('back' face) to disappear and backface-visibility: hidden
to be ignored for the other.
From the spec (link):
The following CSS property values require the user agent to create a flattened representation of the descendant elements before they can be applied, and therefore override the behavior of transform-style: preserve-3d
:
overflow
: any value other thanvisible
.filter
: any value other thannone
.clip
: any value other thanauto
.clip-path
: any value other thannone
.isolation
: used value ofisolate
.mask-image
: any value other thannone
.mask-box-source
: any value other thannone
.mix-blend-mode: any value other than normal.
The computed value of transform-style
is not affected.
转载于:https://www.cnblogs.com/zxdesign/p/4120327.html
关于 CSS3 backface-visiable 与 overflow 属性的冲突相关推荐
- CSS3:overflow属性详解
1.Overflow overflow为溢出(容器),当内容超出容器时只需添加overflow属性值为hidden, 就可以把超出容器的部分隐藏起来: 如果内容超出容器却又不想其隐藏时可以将其属性值设 ...
- html元素的overflow属性详解
最近更新时间:2018年6月20日11:39:55 <我的博客地图> 最近接手一个老项目,该项目是用EasyReport这个Web报表工具在web页面动态展示数据库数据,在开发调试过程中遇 ...
- 关于CSS中position属性和overflow属性的使用小结
关于CSS中position属性和overflow属性的使用小结 position属性 用于设置某个元素的位置类型.取值类型可以有:static.relative.absolute.fixed.inh ...
- overflow属性html5,什么是css中overflow属性
什么是css中overflow属性 发布时间:2020-07-11 16:06:42 来源:亿速云 阅读:192 作者:Leah 本篇文章给大家分享的是有关什么是css中overflow属性,小编觉得 ...
- Flutter开发之Text的overflow属性不生效(14)
我在使用 Text 控件时,由于文字太多,需要省略显示.设置 overflow: TextOverflow.ellipsis 没有效果,尾部显示还多了黄色相间的胶带色块.应该是:提示Text的布局边界 ...
- CSS Overflow属性详解(转)
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容. 所有对象的默认值是 visible ,除了 textarea 对象和 body 对象的默认值是 auto .设置 textarea 对象此属 ...
- CSS display overflow 属性 cursor光标类型
display属性 功能:规则网页元素如何显示的问题. 取值:none(隐藏).block(以块元素显示).inline(以行内元素显示) block:可以实现将行内元素转成块元素. ...
- CSS的overflow属性:显示 隐藏 滚动显示 自动显示 继承
overflow 属性规定当内容溢出元素框时发生的事情
- java怎么设有滚动的标签,html标签overflow属性和javascript实现div标签滚动
原标题:html标签overflow属性和javascript实现div标签滚动 昨天一个朋友说他实现了一个div循环滚动显示的demo,但是弄到jsp中就不滚动了,而且debug测试div的scro ...
最新文章
- 算法工程师的必备学习资料,《AI算法工程师手册》正式开源了
- php 验证微信token_微信token认证程序
- docker 开启remote api
- EHPC通过断点续算和自动伸缩在抢占式实例上实现低成本HPC计算
- 黑马程序员-10 IO流2 File,properties,合并流,对象持久化,管道流,RandomAccessFile...
- spring学习(11):使用配置类
- 测试环境服务器硬盘塞满问题排查
- 基于Pairwise排序学习的因子分解推荐算法
- 《程序员代码面试指南》第三章 二叉树问题 判断t1树是否包含t2树全部的拓扑结构...
- JavaScript工具类:util.js用法实例
- qt5版本管理git_Building Qt 5 from Git/zh
- 为啥将phpstudy打开,却访问不了rips
- 2021-11-16 QCustomPlot之柱状图
- SpringBoot时区问题解决,彻底解决时差问题
- 转载的,给大家分享,,希望有用
- 使用反射判断对象的值是否为空并赋新值操作
- JAVA基础控制台版本演示增删改查项目(带完整源码)
- 探索React生态圈
- 前端面试超全整理3(webpack性能优化及监控)
- ai怎么画循环曲线_Illustrator绘制循环的矢量印花图稿