About the conflict between CSS3 backface-visiable and overflow attributes_html/css_WEB-ITnose

I recently discovered a strange problem when making a flip effect. After setting backface-visiable: hidden; overflow: hidden, the back side of the element was not hidden after being reversed 180 degrees. In the end, it was discovered by Google. Overflow will overwrite the transform-style: preserve-3d attribute, and the following elements will cause transform-style: preserve-3d to fail:

Reference address: 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.