Подтвердить что ты не робот

Разделить фоновое изображение с эффектом толщины 3D

Я хочу разделить фоновое изображение. Например, оригинальное изображение, подобное этому

и мне нужен такой эффект:

Это мой код

<style>
    div{

    -webkit-transform: skewY(175deg); 
    padding: 10px;
    margin: 10px;
    border: 10px;
    background-image: url(Chrysanthemum.jpg);
    width: 200px;
    height: 200px;
    background-origin: content-box;
    }
</style>
<div></div>

Но я не могу найти способ разделить этот фон с тем же эффектом толщины с CSS или jQuery.

Ответ 1

Этот ответ содержит только решения для отдельных элементов

Двумерное решение состояло бы в том, чтобы просто использовать псевдоэлементы :before и :after для имитации пробелов. Вам нужно position их и дать им правильное расстояние до границы с calc().

Чтобы сделать его более 3D, вы можете использовать transform perspective() в комбинации с rotateY() вместо skewY():

div {
  position: relative;
  -webkit-transform: perspective(1000px) rotateY(30deg);
  transform: perspective(1000px) rotateY(30deg);
  margin: 50px 10px;
  background-image: url(http://placekitten.com/g/600/200);
  width: 600px;
  height: 200px;
}
div:before,
div:after {
  content: "";
  position: absolute;
  top: 0;
  width: 10px;
  height: 100%;
  background: white;
}
div:before {
  left: calc(33% - 5px);
}
div:after {
  right: calc(33% - 5px);
}

<div></div>

Ответ 2

Вот 3D-подход, чтобы разрезать изображение на 3 части и сделать эффект толщины. Он реагирует и полагается на:

3d-преобразования для поворота изображения и эффекта толщины
"техника заполнения", чтобы сохранить соотношение сторон элементов.
псевдоэлементы, чтобы сделать тикность каждой части изображения
фоновое изображение и фоновое положение

Демонстрация трехмерное и толстое изображение.

Вывод:

body{perspective:1000px;}
.imgWrap{
  position:relative;
  width:90%;
  margin:5% auto;
  padding-bottom:39%;
  transform: rotateY(25deg);
  transform-style:preserve-3d;
}
.imgWrap > div{
  position:absolute;
  top:0;
  width:30.3%;height:100%;
  float:left;
  background-image:url('http://i.imgur.com/FhZxJJp.jpg');
  background-size:auto 100%;
  transform-style:preserve-3d;
  outline: 1px solid transparent; /* prevent jagged edges in firefox */
}
.imgWrap .left  { left: 0;     background-position:   3% 0; }
.imgWrap .center{ left:34.83%; background-position: -97% 0; }
.imgWrap .right { left:69.66%; background-position:-197% 0; }
.imgWrap > div:before{
  content:'';
  position:absolute;
  top:0;right:100%;
  width:10%; height:100%;
  background:inherit;
  transform-origin:100% 50%;
  transform:rotateY(-90deg);
}
.imgWrap .left:before  { background-position:     0%   0; }
.imgWrap .center:before{ background-position: -1001.3% 0; }
.imgWrap .right:before { background-position: -2001.4% 0; }

<div class="imgWrap">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>