时间戳

首页 > 解决方案 > 制作一个带有 z 平移背景的类似于抠图的 div

css - 制作一个带有 z 平移背景的类似于抠图的 div

问题描述

我想制作具有滚动时具有这种 3d 效果的背景的 div，可以通过translateZ. 最后它应该看起来像切口或窗口，通过它们你可以看到（背景）图像。
编辑：因此，如果您滚动页面，您可以看到这些框/切口，但其中的图像在滚动时移动速度较慢，以创建它们更远的效果。编辑结束

我的想法是为剪切设置一个 div，然后在其中设置另一个 div 作为背景。所以，我设置了它，它没有工作。事实证明，overflow: hidden;外部 div 的 以某种方式阻止了transform: translateZ(-5px) scale(1.05);其子 div 的 。

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

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);
}
<section id="artwork">
  <div class="pic"><div></div></div>
  <div class="pic"><div></div></div>
  <div class="pic"><div></div></div>
</section>

PS：我不想通过 JavaScript 来实现效果，因为它在大多数计算机上运行不顺畅。

编辑 n°2：到目前为止我的方法：
- 制作额外的刻度边框以覆盖图像 div 的重叠部分；而不是使用overflow: hidden>> 部分有时仍会在某些屏幕尺寸上重叠，并且需要大量空间
- 创建一个clip-path用作overflow: hidden>> 剪辑路径也会破坏translateZ
- 在外部和内部 div 上玩弄display>>position唯一解决方案没有切口
- 将外部 div 的父级 Z 平移到更远的地方，然后再次关闭外部 div >> 仍然被overflow: hidden;

标签： cssoverflowtranslate3d

解决方案

我找到了一种解决方法，尽管这是一种妥协，因为边界半径不起作用。我在外部 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>

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

推荐阅读