我不久前开始写代码。我写了一个函数，当点击时，它会关注3张图片中的1张，并将另外2张图片发送到页面底部。虽然我设法让代码工作，但我觉得它可以比现在小得多。我开始感到恼火，因为我似乎找不到缩短它的方法。有什么帮助吗？
Here's a codepen link

const container = document.querySelector('.container');
let cards = document.querySelector('.cards');
let card = document.querySelector('.card');
let body = document.body;
let card1 = document.querySelector('.card1');
let card2 = document.querySelector('.card2');
let card3 = document.querySelector('.card3');

function moveImages(e) {
  let v = window.innerWidth;
  let h = window.innerHeight;

  let x = (e.clientX / v) - 0.5
  let y = (e.clientY / h) - 0.5

  cards.style.transform = `translate(${x*4}%, ${y*4}%)`;
}

container.addEventListener('mousemove', e => moveImages(e));

/*function choosePicture(name) {

    if (name) {
        if (document.querySelector('.opened')){
            document.querySelector('.opened').classList.remove('opened');
        } else {
            name.classList.add('opened');
        }
    }
}*/

function choosePicture(name) {

  if (name === card1) {
    if (document.querySelector('.opened')) {
      document.querySelector('.opened').classList.remove('opened');
      card2.classList.remove('moveToBottom');
      card3.classList.remove('moveToBottom');

    } else {
      card1.classList.add('opened');
      card2.classList.add('moveToBottom');
      card3.classList.add('moveToBottom');
    }
  } else if (name === card2) {
    if (document.querySelector('.opened')) {
      document.querySelector('.opened').classList.remove('opened');
      card1.classList.remove('moveToBottom');
      card3.classList.remove('moveToBottom');
    } else {
      card2.classList.add('opened');
      card1.classList.add('moveToBottom');
      card3.classList.add('moveToBottom');
    }
  } else if (name === card3) {
    if (document.querySelector('.opened')) {
      document.querySelector('.opened').classList.remove('opened');
      card1.classList.remove('moveToBottom');
      card2.classList.remove('moveToBottom');
    } else {
      card3.classList.add('opened');
      card1.classList.add('moveToBottom');
      card2.classList.add('moveToBottom');
    }
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: rgb(52, 0, 108);
  background: linear-gradient(0deg, rgba(52, 0, 108, 1) 0%, rgba(123, 0, 255, 1) 100%);
  overflow: hidden;
}

.container {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cards {
  display: flex;
  align-items: center;
  justify-content: center;
  transition-timing-function: ease-in-out;
  touch-action: none;
}

.card {
  height: 400px;
  width: 225px;
  border-radius: 20px;
  cursor: pointer;
  overflow: hidden;
  transition-duration: 0.5s;
  z-index: 999;
}

.img {
  max-width: 100%;
  object-fit: cover;
  border-radius: 20px;
  transition-duration: 0.5s;
  filter: blur(2px);
  cursor: pointer;
}

.card1 {
  transform: rotateZ(-15deg) translateX(20%) translateY(13%);
  z-index: 998;
}

.card3 {
  transform: rotateZ(15deg) translateX(-20%) translateY(13%);
  z-index: 997;
}

.img:hover {
  filter: blur(0);
}

.card1:hover {
  transform: rotateZ(-15.5deg) translateX(18%) translateY(8%);
  scale: 1.02;
}

.card3:hover {
  transform: rotateZ(17deg) translateX(-18%) translateY(8%);
  scale: 1.02;
}

.card2:hover {
  transform: translateY(-3%) rotateZ(2deg);
  scale: 1.02;
}

.opened {
  transform: rotateZ(0deg) translateX(0%) translateY(-7%);
  scale: 1.4;
}

.opened:hover {
  transform: rotateZ(0deg) translateX(0%) translateY(-7%);
  scale: 1.4;
}

.moveToBottom {
  transform: translateY(500%);
}

<div class="container">
  <div class="cards" id="cards">
    <div class="card1 card" onclick="choosePicture(card1)"><img src="https://images.unsplash.com/photo-1604311795833-25e1d5c128c6?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8OSUzQTE2fGVufDB8fDB8fHww" alt="" class="img img1"></div>
    <div class="card2 card" onclick="choosePicture(card2)"><img src="https://images.unsplash.com/photo-1566895291281-ea63efd4bdbc?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTF8fDklM0ExNnxlbnwwfHwwfHx8MA%3D%3D" alt="" class="img img1"></div>
    <div class="card3 card" onclick="choosePicture(card3)"><img src="https://images.unsplash.com/photo-1616578492900-ea5a8fc6c341?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8OSUzQTE2fGVufDB8fDB8fHww" alt="" class="img img1"></div>
  </div>
</div>

我知道这个：

function choosePicture(name) {
if (name === card1 || card2 || card3) {
        if (document.querySelector('.opened')){
            document.querySelector('.opened').classList.remove('opened');
            
        } else {
            name.classList.add('opened');
        }
    }
}

型
...但这只处理了函数的第一部分。我如何才能使用更少的代码将其他2张图片发送到底部并返回？哦，如果这很重要，我现在只知道vanilla JS：/