为什么溢出属性会影响CSS3 3D变换？

Question

我正在尝试创建多个嵌套的三维变换元素。也就是说，几个嵌套的元素都有三维变换和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效果？

- Leo Jiang

---

并排放置，显而易见。http://jsfiddle.net/Lqfy3mgs/1/ - G-Cyrillus

Answer 1

很抱歉，这是规范要求的：

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

overflow：除了visible以外的任何值。

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

- Rick Hitchcock

Answer 2

w3:

hidden 此值表示内容被剪裁，不应提供滚动用户界面以查看剪裁区域外的内容。

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

- Persijn