01.cd-layout.css

#parent{
  font-size: 0;
  letter-spacing: 0;
  text-align: center;
}
.cd-outer{
  display: inline-block;
  margin: 0 -28px;
  position: relative;
  perspective: 100px;
}

img.cd{
  box-sizing: border-box;
  width: 70px;
  height: 70px;
  object-fit: cover;
  transform: rotateY(45deg);
  transform-origin: left;
  vertical-align: middle;
}
.cd.cd-center{
  width: 90px;
  height: 90px;
  border: 3px solid white;
  transform: rotateY(0);
}
.cd.cd-right{
  transform: rotateY(315deg);
  transform-origin: right;
}

@media screen and (min-width:481px) {
  .cd-outer{
    margin: 0 -55px;
    perspective: 100px;
  }
  img.cd{
    width: 150px;
    height: 150px;
  }
  .cd.cd-center{
    width: 180px;
    height: 180px;
  }
}

02.cd-layout.html

<div id="parent">
  <div class="cd-outer"><img src="../gallery/thumb001.jpg" alt="" class="cd"></div>
  <div class="cd-outer"><img src="../gallery/thumb002.jpg" alt="" class="cd"></div>
  <div class="cd-outer"><img src="../gallery/thumb003.jpg" alt="" class="cd"></div>
  <!-- 略 -->
</div>

03.cd-layout.js

const cd_outers = document.getElementsByClassName('cd-outer');
const cds = document.getElementsByClassName('cd');
const cnum = Math.floor(cds.length/2);

[...cds].forEach(cd=>{
  cd.addEventListener('mouseover',(e)=>{
    cd_view(e.target);
  });
});
cd_view(cds[cnum]);

function cd_view(el){
  let right = false;
  let z = cds.length;
  [...cds].forEach(cd=>{
    cd.parentElement.style.zIndex = z;
    if(right){
      cd.classList.add('cd-right');
      cd.classList.remove('cd-center');
      z--;
    }else if(el==cd){
      cd.classList.add('cd-center');
      cd.classList.remove('cd-right');
      right = true;
      z--;
    }else{
      cd.classList.remove('cd-center');
      cd.classList.remove('cd-right');
      z++;
    }
  });
}