Javascript 可以的.是否可以在不预编译的情况下使用嵌套 Select 器

我正在try 使用vanilla CSS和Js创建一个纸牌翻转，使用&. Select 器来瞄准一个还包括父元素作为复合 Select 器的元素.

这里有一个例子，使用手写笔. https://codepen.io/colebemis/pen/WNKdNj?editors=1111

我试图简化这里仅使用普通CSS JavaScript的示例. https://codepen.io/dickkirkland/pen/JjVwJdB

在我try 翻转卡片时，2个<div>并不那么无缝，并且似乎独立翻转，而第一个例子中，卡片在视觉上看起来就像一张具有正面和背面的卡片.

我的例子中的JavaScript是否触发太快，或者是否必须包含&.flipped的嵌套，以便动画将被视为1张牌？

我似乎无法使用，或者Codepen编辑不允许我使用直接.使用简单的CSS方法.

有其他方法来实现此动画吗？ 如有任何建议或见解，我们将不胜感激.

HTML是

  <div class="card">
    <div class="front">See More Stats</div>
    <div class="back">-- Member Stats --</div>
  </div>
</div>

与CSS

  height: 100%;
  margin: 0;
}

body {
  background: #00A5F7;
  display: flex; 
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.container {
  width: 300px;
  height: 400px;
  position: relative;  
  perspective: 800px;
  border-radius: 4px; 
}

.card {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border-radius: 6px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  cursor: pointer;
}
  

div {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 6px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font: 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-smoothing: antialiased;
  color: #47525D;
}

/*  .back {
   transform: rotateY(180deg);

   &.flipped {
    transform: rotateY(180deg);
   }

} */

.back {
   transform: rotateY(180deg);
}
.flipped {
   transform: rotateY(180deg);
}

和Js

//     $('.card').toggleClass('flipped');
//   });

let container = document.querySelector('.container');
let card = document.querySelector('.card');
  
 container.addEventListener('click', function () {
    card.classList.toggle('flipped');
 });

除了上面的链接之外，您还可以看到被 comments 掉的CSS &..我不想使用jQuery，并且也在J中注释了这一点.