父级 div 上的边框半径在子级上断开透视/平移 Z

Question

我遵循了仅 css 滚动视差效果的教程，但现在我想将图像放在一个圆圈内。

所以我...

1( 将父div("包装器"(设置为我选择的尺寸，

2(将父级设置为溢出隐藏，(到目前为止一切顺利，视差效果在我的"剪辑"框中仍然有效(，

3( ...但是当我设置任何类型的边框半径时，它会破坏视差效果，在我滚动时将图像冻结在原地。

这是我的笔：https://codepen.io/iiiDaNiii/pen/eEBEyY 视差效果在称为"包装器"的方形div中起作用。 如果尝试添加边框半径，则会破坏视差效果。

.html {
overflow:hidden;
}
.scroll {
right:0px;
overflow-y:auto;
overflow-x:hidden;
position:absolute;
height:100vh;
width:100vw;
-webkit-overflow-scrowling: touch;
-webkit-perspective: 1px;
perspective: 1px;
perspective-origin: 0% 0%;
margins: 0px;
padding: 0px;
top:0px;
}
.wrapper {
background-color:blue;
position:relative;
height:20em;
width:20em;
overflow:hidden;
}
.image {
position:relative;
height:vh;
width:vw;
-webkit- transform: translateZ(-1px) scale(2);
transform: translateZ(-1px) scale(2);
transform-origin: 50% 0;
}
.space{
position:relative;
background-color:white;
height:2000px;
}

有什么想法吗？

更新/澄清：我希望圈外的任何内容都是透明的......这样视差圆图像就可以坐在另一个图像之上。

Answer 1

我相信我已经找到了解决方案。

我在.wrapper元素中添加了一个伪类，并对其应用了一个实心box-shadow，border-radius为 5px，这保持了视差效果并给出了圆角。

因此，将以下选择器添加到您的 css 中：

.wrapper:before
{
position: absolute;
content: '';
top: 0; left: 0;
right: 0; bottom: 0;
border-radius: 5px;
z-index: 5;
box-shadow: 0 0 0 10px white;
}

我在这里创建了一个现场小提琴。