关于 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.
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
