首頁 > web前端 > html教學 > 关于 CSS3 backface-visiable 与 overflow 属性的冲突_html/css_WEB-ITnose

关于 CSS3 backface-visiable 与 overflow 属性的冲突_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 11:53:24
原創
1299 人瀏覽過

最近在做一个 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 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.

    來源:php.cn
    本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
    熱門教學
    更多>
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板