为什么溢出属性会破坏 CSS3 3D 变换？答案

【问题标题】：Why does the overflow property break CSS3 3D transforms?为什么溢出属性会破坏 CSS3 3D 变换？
【发布时间】：2015-03-11 21:07:05
【问题描述】：

我正在尝试制作多个嵌套的 3D 转换元素。 IE。几个嵌套元素都有 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？

【问题讨论】：

并排，看起来很明显。jsfiddle.net/Lqfy3mgs/1

标签： css transform css-transforms

【解决方案1】：

恐怕这是符合规范的：

以下 CSS 属性值要求用户代理创建一个后代元素的展平表示，然后才可以已应用，因此强制使用 transform-style 的值 扁平：

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

...

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

【讨论】：

【解决方案2】：

w3:

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

如您所见，这是针对 3d 转换元素的，因此即使转换也无法逃脱设置 overflow:hidden 时发生的剪辑。

【讨论】：