@charset "utf-8";





.gallery {
 position: relative;
 width: 120px;
 height: 168px;
 transform-style: preserve-3d;
 animation: animate 50s linear infinite;
 animation-play-state: running;
}

.center {
  margin: auto;
}

.gallery:hover{
 animation-play-state: paused;
}


@keyframes animate {
 0%{transform: perspective(1000px) rotateY(0deg);}
 100%{transform: perspective(1000px) rotateY(360deg);}
}

.gallery span {
 position: absolute;
 top: 0px;
 left: 0 px;
 width: 100%;
 height:100%;
 transform-origin: center;
 transform-style: preserve-3d;
 transform: rotateY(calc(var(--i)* 27.6deg)) translateZ(300px);
  -webkit-box-reflect: below 0px linear-gradient(transparent, transparent, transparent, #000000);
}

.gallery span img {
 position: absolute;
 top: 0px;
 left: 0 px;
 width: 100%;
 height:100%;
 object-fit: cover;
 cursor: pointer;
}