關於 CSS3 backface-visiable 與 overflow 屬性的衝突

標籤：des   style   http   io   ar   sp   for   on   div   

最近在做一個 flip 效果的時候發現一個奇怪的問題，設定了 backface-visiable：hidden；overflow：hidden 的元素反轉180度以後背面沒有被隱藏，最終還是被Google出來了，overflow會覆蓋transform-style: preserve-3d屬性，還有以下一些元素會導致transform-style: preserve-3d失效： 參考地址：http://codepen.io/thebabydino/details/rACbl Don‘t set overflow: hidden on elements with 3D transformed childrenBy Ana TudorDESCRIPTION

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 than visible.

• filter: any value other than none.

• clip: any value other than auto.

• clip-path: any value other than none.

• isolation: used value of isolate.

• mask-image: any value other than none.

• mask-box-source: any value other than none.

• mix-blend-mode: any value other than normal.

The computed value of transform-style is not affected.

關於 CSS3 backface-visiable 與 overflow 屬性的衝突