Question

我要制作的div在滚动时具有具有3d效果的背景，而该背景可以使用text实现。最后，它看起来应该像切口或窗户，通过它们您可以看到（背景）图像。
编辑：因此，如果您滚动浏览该页面，则可以看到这些方框/切口，但是其中的图像在滚动时移动较慢，从而产生了距离更远的效果。 编辑结束

我要记住的是为抠图设置一个div，然后在其中设置另一个div作为背景。因此，我对其进行了设置，但没有成功。事实证明，外部div的translateZ会以某种方式阻止其子级的overflow: hidden;。

这是到目前为止我得到的：

transform: translateZ(-5px) scale(1.05);

body {
  perspective: 100px;
  transform-style: preserve-3d;
  
  overflow-x: hidden;
  overflow-y: scroll;
}

#artwork, #photos {
  width: 800px;
  padding: 0 50px;
  box-sizing: border-box;
	
  display: flex;
  justify-content: space-between;
}

.pic {
  /*position: relative;*/
  width: 200px;
  height: 100px;

  display: inline-block;

  background: #aaa;
  border-radius: 10px;

  box-shadow: inset 0 10px 30px rgba(0,0,0,.3);
}

#artwork > * {
  overflow: hidden;
}

.pic div {
  position: absolute;
  width: 200px;
  height: 110px;

  background: #660; /*couldn't put an image here*/
  background-size: cover;

  transform: translateZ(-5px) scale(1.05);
}

P.S .：我不想通过JavaScript达到这种效果，因为它在大多数计算机上无法正常工作。

修改n°2：到目前为止，我的方法：
-制作额外的刻度线边框以覆盖图像div的重叠部分；而不是使用<section id="artwork"> <div class="pic"><div></div></div> <div class="pic"><div></div></div> <div class="pic"><div></div></div> </section> >>某些部分在某些屏幕尺寸上有时仍会重叠并且占用大量空间
-创建overflow: hidden用作clip-path >>剪切路径也会破坏overflow: hidden
-在外部和内部div上同时使用translateZ和display >>仅无切口的解决方案
-Z将外部div的父级转换得更远，然后再次使外部div关闭>>仍被position

阻止

Answer 1

我找到了一种解决方法，尽管这是一个折衷方案，因为边界半径无效。我在外部div的背景色中添加了粗边框，并将内部div的z-index设置为负数。

body {
  height: 200px;
  
  perspective: 100px;
  transform-style: preserve-3d;
  
  overflow-x: hidden;
  overflow-y: scroll;
}

#artwork {
  width: 800px
  padding: 0 50px;
  box-sizing: border-box;
  
  display: flex;
  justify-content: space-between;
}

.pic {
  width: 200px;
  height: 100px;
  margin: -40px;
  
  display: inline-block;
  
  background: transparent;
  border: 40px solid hsl(30, 50%, 90%);
  box-shadow: inset 0 10px 30px rgba(0,0,0,.3);
}

.pic div {
  position: absolute;
  width: 200px;
  height: 110px;
  
  background: linear-gradient(135deg, rgba(240,183,161,1) 0%,rgba(140,51,16,1) 50%,rgba(117,34,1,1) 51%,rgba(191,110,78,1) 100%);
  
  transform: translateZ(-5px) scale(1.05) translateY(-1vw);
  z-index: -20;
}

#artwork div:nth-child(2) div, #photos div:nth-child(2) div {transform: translateZ(-5px) scale(1.05) translateX(-1.5vw) translateY(-1vw);}
#artwork div:nth-child(4) div, #photos div:nth-child(4) div {transform: translateZ(-5px) scale(1.05) translateX(1.5vw) translateY(-1vw);}

<br><br><br><br><br><br><br>
<section id="artwork">
  <div class="pic"><div></div></div>
  <div class="pic"><div></div></div>
  <div class="pic"><div></div></div>
</section>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

该代码段由于某种原因在这里不起作用。但是对我来说，它可以在浏览器中使用。如果有人可以建议另一种可能的解决方案，那就太好了，因为该解决方案仅适用于某些屏幕尺寸。

用z转换的背景制作一个类似cutout的div

1 个答案: