body{
margin:0;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
background:#111;
perspective:1000px;
}

.container{
position:relative;
width:250px;
height:350px;
transform-style:preserve-3d;
animation:rotateLantern 10s linear infinite;
}

.face{
position:absolute;
width:250px;
height:350px;
border:3px solid white;
overflow:hidden;
}

.face img{
width:100%;
height:100%;
object-fit:cover;
}

.face:nth-child(1){
transform:rotateY(0deg) translateZ(220px);
}

.face:nth-child(2){
transform:rotateY(60deg) translateZ(220px);
}

.face:nth-child(3){
transform:rotateY(120deg) translateZ(220px);
}

.face:nth-child(4){
transform:rotateY(180deg) translateZ(220px);
}

.face:nth-child(5){
transform:rotateY(240deg) translateZ(220px);
}

.face:nth-child(6){
transform:rotateY(300deg) translateZ(220px);
}

@keyframes rotateLantern{
from{
transform:rotateY(0deg);
}
to{
transform:rotateY(360deg);
}
}