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中对此进行了测试。是否可以使用overflow？

制作祖先3D

Answer 1

我担心这符合规范：

以下CSS属性值要求用户代理创建   在它们可以之前展平后代元素的表示   应用，因此强制将transform-style的使用值强制为   的平：


溢出：除可见之外的任何值。

...

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

Answer 2

<强> w3:

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

正如你所看到的那样，对于3d变换元素aswel，所以即使变换也无法摆脱设置overflow:hidden时发生的剪辑。

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

2 个答案: