Создание вырезки в виде div с фоном, переведенным в z - PullRequest
Новая
       23

Создание вырезки в виде div с фоном, переведенным в z

0 голосов
/ 18 ноября 2018

Я хочу сделать div, у которых есть фоны с этим 3d-эффектом при прокрутке, которого можно достичь с помощью translateZ. В конце она должна выглядеть как вырезы или окна, и через них вы можете видеть (фоновые) изображения.
edit: Таким образом, если вы прокручиваете страницу, вы можете видеть эти поля / вырезы, но изображения внутри них перемещаются медленнее при прокрутке, чтобы создать эффект, что они находятся дальше. конец редактирования

Я имею в виду, что у меня есть один div для выреза, а затем еще один div для фона. Итак, я настроил это, и это не сработало. Оказывается, что overflow: hidden; внешнего div каким-то образом блокирует 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);
}
<section id="artwork">
  <div class="pic"><div></div></div>
  <div class="pic"><div></div></div>
  <div class="pic"><div></div></div>
</section>

P.S .: Я не хочу достигать эффекта с помощью JavaScript, потому что он не работает гладко на большинстве компьютеров.

edit n ° 2: мои подходы пока:
- создание дополнительных границ для галочек, чтобы покрыть перекрывающиеся части изображения div; вместо использования overflow: hidden >> детали иногда по-прежнему перекрываются на экранах некоторых размеров, и это занимает много места
- создание clip-path для использования в качестве overflow: hidden >> пути-клипов также ломает translateZ
- играть с display и position как на внешнем, так и на внутреннем div >> только решения без выреза
- Перевести родителя внешнего элемента еще дальше, а затем снова закрыть внешний элемент >>, все еще заблокированный overflow: hidden;

1 Ответ

0 голосов
/ 18 ноября 2018

Я нашел обходной путь, хотя это компромисс, потому что радиус границы не работает.Я добавил толстые границы в цвете фона к внешним элементам div и установил z-индекс внутренних элементов div на что-то отрицательное. 

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>

этот фрагмент кода по какой-то причине здесь не работает.Для меня, однако, это работает в браузере.Было бы неплохо, если бы кто-то мог предложить другое возможное решение, так как оно работает только с некоторыми размерами экрана.

...