父div上的border-radius打破了視角/子div上的translateZ

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元素中添加了一個偽類，並.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;
}

我在這里創建了一個現場小提琴。