我正在尝试重新创建在 W3 website. 上看到的这种 3D 效果
我已将代码放在 jsFiddle 中但如您所见,已应用变换,但交点效果未正确呈现。它在 Firefox 中也不起作用。
这是 Chrome 的问题还是代码的问题?
<style>
.container {
background-color: rgba(0, 0, 0, 0.3);
transform-style: preserve-3d;
perspective: 500px;
}
.container > div {
position: absolute;
left: 0;
}
.container > :first-child {
transform: rotateY(45deg);
background-color: orange;
top: 10px;
height: 135px;
}
.container > :last-child {
transform: translateZ(40px);
background-color: rgba(0, 0, 255, 0.75);
top: 50px;
height: 100px;
}
</style>
<div class="container">
<div></div>
<div></div>
</div>
最佳答案
这是 Why does this 3D CSS overlap instead of clip? 的副本...根据那个问题,这是 webkit 中报告的错误:https://bugzilla.mozilla.org/show_bug.cgi?id=689498 :
Bug 689498 - Intersecting planes are not z-ordered properly
Alistair MacDonald 2012-04-12 12:22:25 PDT Safari & Mobile Safari no longer have this problem. The problem still exists in Chrome and Firefox.
Broken: Firefox 14.0a1 (2012-04-12) -Win7 Broken: Chrome 20.0.1096.1 -Win7 Fixed : Safari 5.1.5 (75.34.55.3) -Win7 Fixed : Mobile Safari (last updated over a month ago) -iOs
Link to test-case and screen-grabs: http://f1lt3r.com/code/3d-css-transforms-intersecting-planes-not-clipping/
关于css - Chrome 3D CSS 转换交叉点无法正确呈现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16968440/