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