CODEWITHSUNDEEP
csstransformcss-transforms
Leo Jiang
Leo Jiang

Reputation: 26105

Why does the overflow property break CSS3 3D transforms?

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?

Upvotes: 7

Views: 1290

Answers (2)

Rick Hitchcock
Rick Hitchcock

Reputation: 35670

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

Upvotes: 7

Persijn
Persijn

Reputation: 14990

w3:

hidden This value indicates that the content is clipped and that no scrolling user interface should be provided to view the content outside the clipping region.

As you can see this is for 3d transformed elements aswel so even the transform cant escape the clipping that happends when setting overflow:hidden.

Upvotes: 0

Related Questions