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

#javascript #html #css #svg #анимация

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

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

Ответы

Ответ 1

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

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

   


.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; }

  

  

  


 


  

  

  




Ответ 2

SVG решение

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



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


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




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

	 





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


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


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

 

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


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

   




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