关于 CSS3 backface-visiable 与 overflow 属性的冲突最近在做一个 flip 效果的时候发现一个奇怪的问题，设置了backface-visiable：hidden；overflow：hidden 的元素反转180度以后背面没有被隐藏，最终还是被Google出来了，overflow会覆盖transform-style: PReserve-3d属性，还有以下一些元素会导致transform-style: preserve-3d失效：参考地址：http://codepen.io/thebabydino/details/rACblDon't set overflow: hidden on elements with 3D transformed childrenByAna TudorDESCRIPTIONThe 'back' face of the card has arotateY(180deg)set on it. Both faces havebackface-visibility: hiddenset. Setting overflow: hidden on their parent (the card) causes the 3D transformed face ('back' face) to disappear andbackface-visibility: hiddento 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 oftransform-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 oftransform-styleis not affected.