Javascript 翻盖卡片不显示背面

我正在学习webdev，在我正在从事的一个项目中，我必须使用css构建一个翻转卡

我已经做了，它的工作很好，当我翻转它悬停。我希望能够在点击时将其翻转，但当我点击它时，背面不会显示

有人能指出我做错了什么吗

谢谢

这里是代码笔

HTML

JS

提前感谢

看看这个

我已经将转换从类中移除，将翻转的类添加到后面，并将这个js应用到这个类中

$(".card__side").click(function(){
  $("div.flipped").removeClass('flipped');
  $(this).addClass("flipped");
});

---

您的HTML代码中没有带有类card___;面的元素，您的意思是内部的card___;u吗？您只旋转了一面[前面的一面被单击]。。。您需要同时旋转这两个，或将旋转应用于parent@PatrickHund类存在，他的代码是SASS代码它存在于SASS代码中，是的，但不存在于HTML代码中，因此单击事件侦听器附加到HTML中存在的一组空元素

.container{
    display: flex;
    height:auto;
    justify-content: space-around;
    position: relative;
    align-items: center;

}

.card{
    perspective: 150rem;
    position: relative;
    height: 20rem;
    width:10rem;

    &__inner{
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        height: 20rem;
    }

    &__side {
        position: absolute;
        top: 0;
        left: 0;
        height: 20rem;
        width:10rem;
        transition: all 0.8s ease;
        backface-visibility: hidden;
        border-radius: 0.5rem;
        box-shadow: 0 8px 6px -6px black;

        &-front{
            background: peru;
        }
        &-back{
            background: orchid;
            transform: rotateY(180deg);
        }
    }

    // &:hover &__side-front{
    //     transform: rotateY(180deg);
    // }

    // &:hover &__side-back{
    //     transform: rotateY(0deg);
    // }

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

$(".card__side").click(function(){
  $(this).addClass("flipped");
});

$(".card__side").click(function(){
  $("div.flipped").removeClass('flipped');
  $(this).addClass("flipped");
});