Фрагментация картинки с возможностью перемещения каждого фрагмента

Question

Суть вопроса в заголовке, добавлю только, что не важно какие теги и css будет использован(или даже js, но лучше без него), главное фрагменты картинок можно было перемещать.

Что-то похожее есть, но это решение не подходит

Answer 1

Находим картинку по вкусу

Габаритные размеры - 813 x 514px

<!-- Необходимо подобрать значения background-position при сильном отличии габаритных размеров вашей картинки от оригинала --> .imgWrap .left { left: 0; background-position: 3% 0; } .imgWrap .center{ left:34.83%; background-position: -87% 0; } .imgWrap .right { left:69.66%; background-position:-157% 0; }

За придания объема картинке отвечают:

.imgWrap > div:before{ content:''; position:absolute; top:0;right:100%; width:10%; height:100%; background:inherit; transform-origin:100% 50%; transform:rotateY(-90deg); }

body{perspective:1000px;}
.imgWrap{
  position:relative;
  width:80%;
  margin:5% auto;
  padding-bottom:39%;
  transform: rotateY(25deg);
  transform-style:preserve-3d;
}
.imgWrap > div{
  position:absolute;
  top:20%;
  width:30.3%;height:100%;
  float:left;
  background-image:url('https://i.stack.imgur.com/ZE0fb.jpg');
  background-size:auto 100%;
  transform-style:preserve-3d;
  outline: 2px solid transparent; */
}
.imgWrap .left  { left: 0;     background-position:   3% 0; }
.imgWrap .center{ left:34.83%; background-position: -87% 0; }
.imgWrap .right { left:69.66%; background-position:-157% 0; }
.imgWrap > div:before{
  content:'';
  position:absolute;
  top:0;right:100%;
  width:10%; height:100%;
  background:inherit;
  transform-origin:100% 100%;
   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>
</style> 

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

Answer 2

SVG решение

SVG решение - должно быть по определению, - адаптивно.

Чтобы приложение было адаптивно и не разрушались пропорции между фрагментами изображения необходимо сделать следующее:

• Изображение добавляется внутрь svg с помощью команды <image> и задаются размеры его в процентах width="100%" height="100"
• Окна вырезать комбинированной маской. При присвоении одним частям маски fill="white" она будет прозрачна и в вырезанных окошках будут видны фрагменты изображения. Закраска fill="black" делает участок маски непрозрачным - это белые перемычки между окнами.
  Более подробно и просто о масках здесь
• Обернуть svg <div class="container"> в родительский контейнер. Изменяя проценты ширины и высоты контейнера можно регулировать начальные размеры блока.

.container {
width:100%;
height:100%;
}

<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
       width="100%" height="100%" viewBox="0 0 1375 800" preserveAspectRatio="xMinYMin meet" > 
 <defs>
    <mask id="modular">
      <rect width="100%" height="100%"  fill="black" /> 
  <g fill="white">
      <rect x="0" y="0" width="190" height="500" />
      <rect x="210" y="0" width="180" height="500" />
      <rect x="410" y="0" width="180" height="500" />
      <rect x="610" y="0" width="180" height="500" />
      <rect x="810" y="0" width="190" height="500" />  
   </g>
    </mask>
  </defs>
<image xlink:href="https://i.stack.imgur.com/Se35c.jpg" width="100%" height="100%" mask="url(#modular)" />
</svg>

</div>

Анимация фрагментов изображения

• При наведении курсора на картинку фрагменты изображения сливаются в целое изображение.

Это обеспечивает команда анимации добавленная в маску:

<animate attributeName="x" values="210;189" dur="1s" begin="img1.mouseover" restart="whenNotActive" fill="freeze" />

Реализация смещения фрагмента изображения (секции маски) осуществляется изменением координаты левого верхнего угла прямоугольника - X values="210;189"

• При уходе курсора с картинки, изображение возвращается к исходному состоянию :

  <animate attributeName="x" values="189;210" dur="1s" begin="img1.mouseout" restart="whenNotActive" fill="freeze" />

.container {
width:100%;
height:100%;
}

<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
       width="100%" height="100%" viewBox="0 0 1000 500" preserveAspectRatio="xMinYMin meet"  > 
 <defs>
    <mask id="modular">
      <rect width="100%" height="100%"  fill="black" /> 
  <g fill="white">
      <rect x="0" y="0" width="190" height="500" />
      <rect x="210" y="0" width="180" height="500" >
    <animate attributeName="x" values="210;189" dur="1s" begin="img1.mouseover" restart="whenNotActive"  fill="freeze" />
    <animate attributeName="x" values="189;210" dur="1s" begin="img1.mouseout" restart="whenNotActive" fill="freeze" />
   </rect>
      <rect x="410" y="0" width="180" height="500" >
   <animate attributeName="x" values="410;360" dur="1s" begin="img1.mouseover" restart="whenNotActive" fill="freeze" />
   <animate attributeName="x" values="360;410" dur="1s" begin="img1.mouseout" restart="whenNotActive" fill="freeze" />
    </rect>
      <rect x="610" y="0" width="180" height="500" >
   <animate attributeName="x" values="610;535" dur="1s" begin="img1.mouseover" restart="whenNotActive"  fill="freeze" /> 
    <animate attributeName="x" values="535;610" dur="1s" begin="img1.mouseout" restart="whenNotActive" fill="freeze" />
    </rect>
      <rect x="810" y="0" width="190" height="500" >
<animate attributeName="x" values="810;710" dur="1s" begin="img1.mouseover" restart="whenNotActive" fill="freeze" />
 <animate attributeName="x" values="710;810" dur="1s" begin="img1.mouseout" restart="whenNotActive" fill="freeze" />
    </rect>   
   </g>
    </mask>
  </defs>
<image id="img1" xlink:href="https://i.stack.imgur.com/Se35c.jpg" width="100%" height="100%" mask="url(#modular)" />
</svg>

</div>