为何overflow:hidden会破坏z-index与translateZ效果，而visible不会？

我正在制作一个3D艺术作品，部分图层位于框架图层前方，部分位于后方。目标是让框架能够遮罩其后方的图层，同时旋转作品时仍能保留深度效果。

未设置框架遮罩时效果正常，但将框架的overflow:hidden或使用clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)后，框架后方的图层会失去深度变得扁平化。示例中原本能看到月亮与花朵的深度，但它们的边缘会超出框架；应用遮罩后边缘被隐藏，可深度效果也消失了。

我尝试过调整相对与绝对定位组合，但仍未解决问题，寻求技术方案。

环境：Mac（Ventura 13.5.1）、Chrome浏览器

现有CSS代码 #

body {
margin: 0;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
perspective: 1000px;
overflow: hidden; 
}

.artwork {
width: 509px;
height: 768px;
position: relative;
transform-style: preserve-3d;
transition: transform 0.5s;
box-shadow:
  rgba(22, 31, 39, 0.42) 0px 60px 123px -25px,
  rgba(19, 26, 32, 0.08) 0px 35px 75px -35px;
z-index: 12;
}

.layer {
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
transform-style: preserve-3d;
}

.frame {
position: fixed;
width: 509px;
height: 768px;
background-size: cover;
transform-style: preserve-3d;
border: 1px solid #333;
transform: translateZ(0px);
}

尝试过的遮罩代码 #

/* 方案1 */
overflow:hidden;
/* 方案2 */
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);

内容的提问来源于stack exchange，提问作者Tom Columbus