<div class="swingin-picture">
  <figure class="achiesua">
  <img src="http://zornet.ru/_fr/79/s1547678.jpg" alt=""></img>
  <figcaption>Фото 1</figcaption>
  </figure>
  <figure class="achiesua">
  <img src="http://zornet.ru/_fr/79/s1875977.jpg" alt=""></img>
  <figcaption>Фото 2</figcaption>
  </figure>
  <figure class="achiesua">
  <img src="http://zornet.ru/_fr/79/s2290537.jpg" alt=""></img>
  <figcaption>Фото 3</figcaption>
  </figure>
</div>

.swingin-picture {
  display: flex;
  margin-top: 20px;
  flex-wrap: wrap;
  width: 100%;
  justify-content: center;
}
.achiesua {
  margin: 20px;
  animation: achiesua ease-in-out 1s infinite alternate;
  transform-origin: center -20px;
}
.achiesua:hover {
  animation-play-state: paused;
}
.achiesua img {
  border: 5px solid #BFE2FF;
  display: block;
  width: 215px;
  height: 248px;
  object-fit: cover;
}
.achiesua figcaption {
  text-align: center;
  background: #415f77;
  color: #f9f9f9;
  padding: 4px 4px 8px 4px;
  font-family: Verdana, sans-serif;
}
.achiesua:after{
  content: '';
  position: absolute;
  width: 20px;  
  height: 20px;
  border: 2px solid #3f7aad;
  top: -10px;  
  left: 50%;
  z-index: 0;
  border-bottom: none;
  border-right: none;
  transform: rotate(45deg);
}
.achiesua:before {
  content: '';
  position: absolute;
  top: -23px;
  left: 50%;
  display: block;
  width: 1px;
  height: 1px;
z-index: 16;
}  
@keyframes achiesua {
  0% {  
  transform: rotate(3deg);  
  box-shadow: 6px 8px 22px rgba(0,0,0,0.3), 12px 16px 24px rgba(0,0,0,0.2);
  }
  100% {  
  transform: rotate(-3deg);  
  box-shadow: -6px 8px 22px rgba(0,0,0,0.3), -12px 16px 24px rgba(0,0,0,0.2);
  }
}