Why does the overflow property break CSS3 3D transforms?

Question

I'm trying to make multiple nested 3D transformed elements. I.e. several nested elements all have 3D transformations and the transform-style:preserve-3d property.

However, when an element has an overflow property, all of its ancestors are flattened.

For example:

<style>
div{transform-style:preserve-3d;}
</style>

<div style="transform:rotateY(30deg) rotateX(-30deg);">
    <div style="transform:translateZ(30px)">
    <div style="transform:translateZ(30px)">
    <div style="transform:translateZ(30px);overflow:hidden"><!-- everything beyond here is flat -->
    <div style="transform:translateZ(30px)">
    <div style="transform:translateZ(30px)">
    <div style="transform:translateZ(30px)">
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
</div>

Fiddle: http://jsfiddle.net/Lqfy3mgs/

I tested this in Chrome and FF. Is it possible to make the ancestors 3D even with a overflow?

Answer 1

I'm afraid that's per the spec:

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 force the used value of transform-style to flat:

• overflow: any value other than visible.
• ...

Source: http://dev.w3.org/csswg/css-transforms/#grouping-property-values