<div id="cont">
<div id="main">
<div id="mover">
<div id="img1"></div>
<div id="img2"></div>
<div id="img3"></div>
<div id="img4"></div>
<div id="img5"></div>
</div>
</div>

<div id="butt">
<button id="left" onclick="change('l')">Left</button><button id="right" onclick="change('r')">Right</button>
</div>
</div>

body{
  transform:scale(0.5);
}
#cont {
width:100%;
height:100%;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
}
#mover div{
width:400px;
height:300px;
position:absolute;
transition:transform 1s;
}
#main{
width:400px;
height:300px;
}
#mover{
width:400px;
height:300px;
perspective:1000px;
transform-style:preserve-3d;
}
#img1{
background-image:url("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQzqHUj5LDp2zrIrFSr2dcMn_z-Nccz1zcCwA&usqp=CAU");
background-size:cover;
}
#img2{
background-image:url("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTMmGy9eT7y4Re0UOqB5ML4nb_nC7-qR5YRMA&usqp=CAU");
background-size:cover;
}
#img3{
background-image:url("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQk64lSoYgll3IgpU1lUzCnVbCofa3M2HR4LQ&usqp=CAU");
background-size:cover;
}
#img4{
background-image:url("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQm8cIpyGrtdKb8I1vvvwJiaPorHCHgBjkwcA&usqp=CAU");
background-size:cover;
}
#img5{
background-image:url("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRjgx9Oik-favYDCVKINdqWrKALv9b2DYFosg&usqp=CAU");
background-size:cover;
}
button{
padding:30px;
margin-top:150px;
color:white;
background-color:black;
}
button:disabled{
background-color:red;
}

var r=1;
window.onload=function(){
move(1);
};
function move(x){
if(x==1){
document.getElementById("img1").style.transform="translateZ(200px)";
document.getElementById("img2").style.transform="translateX(400px) rotateY(-90deg)";
document.getElementById("img3").style.transform="translateX(500px) rotateY(-90deg)";
document.getElementById("img4").style.transform="translateX(600px) rotateY(-90deg)";
document.getElementById("img5").style.transform="translateX(700px) rotateY(-90deg)";
}

if(x==2){
document.getElementById("img1").style.transform="translateX(-400px) rotateY(90deg)";
document.getElementById("img2").style.transform="translateZ(200px)";
document.getElementById("img3").style.transform="translateX(400px) rotateY(-90deg)";
document.getElementById("img4").style.transform="translateX(500px) rotateY(-90deg)";
document.getElementById("img5").style.transform="translateX(600px) rotateY(-90deg)";
}

if(x==3){
document.getElementById("img1").style.transform="translateX(-500px) rotateY(90deg)";
document.getElementById("img2").style.transform="translateX(-400px) rotateY(90deg)";
document.getElementById("img3").style.transform="translateZ(200px)";
document.getElementById("img4").style.transform="translateX(400px) rotateY(-90deg)";
document.getElementById("img5").style.transform="translateX(500px) rotateY(-90deg)";
}

if(x==4){
document.getElementById("img1").style.transform="translateX(-600px) rotateY(90deg)";
document.getElementById("img2").style.transform="translateX(-500px) rotateY(90deg)";
document.getElementById("img3").style.transform="translateX(-400px) rotateY(90deg)";
document.getElementById("img4").style.transform="translateZ(200px)";
document.getElementById("img5").style.transform="translateX(400px) rotateY(-90deg)";
}
if(x==5){
document.getElementById("img1").style.transform="translateX(-700px) rotateY(90deg)";
document.getElementById("img2").style.transform="translateX(-600px) rotateY(90deg)";
document.getElementById("img3").style.transform="translateX(-500px) rotateY(90deg)";
document.getElementById("img4").style.transform="translateX(-400px) rotateY(90deg)";
document.getElementById("img5").style.transform="translateZ(200px)";
}
}

function change(g){
if(g=="l"){
r=r-1;
if(r==0) r=1;
move(r);
}

if(g=="r"){
r=r+1;
if(r==6) r=5;
move(r);
}
}