为什么溢出属性会破坏CSS3 3D转换？

Question

我正在尝试制作多个嵌套的3D变换元素.即几个嵌套元素都具有3D变换和transform-style:preserve-3d属性.

但是,当元素具有overflow属性时,其所有祖先都会变平.

例如:

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

小提琴:http://jsfiddle.net/Lqfy3mgs/

我在Chrome和FF中测试了这个.是否有可能使祖先3D即使用overflow？

Answer 1

我担心这是符合规范的:

以下CSS属性值要求用户代理在应用它们之前创建子元素的展平表示,并因此强制将transform-style的使用值设置为 flat:

• 溢出:除可见之外的任何值.
• ...

资料来源:http://dev.w3.org/csswg/css-transforms/#grouping-property-values

Answer 2

w3:

hidden 该值表示内容被剪切，并且不应提供滚动用户界面来查看剪切区域之外的内容。

正如您所看到的，这同样适用于 3D 变换元素，因此即使变换也无法逃脱设置时发生的剪裁overflow:hidden。