最近在做一個 flip 效果的時候發(fā)現(xiàn)一個奇怪的問題，設置了?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 children

By?Ana Tudor

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

轉載于:https://www.cnblogs.com/zxdesign/p/4120327.html

總結

以上是生活随笔為你收集整理的关于 CSS3 backface-visiable 与 overflow 属性的冲突的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。