javascript - 翻盖卡背面不显示

Question

我正在学习 webdev，在我从事的一个元素中，我必须使用 css 构建一个活页卡。

我已经完成了，当我在悬停时翻转它时它工作正常。我希望能够在点击时翻转它，但是当我点击它时，背面没有显示。

谁能指出我做错了什么？

谢谢

Codepen 在这里 CODEPEN

HTML

<section class="container">  
  <div class="card"> 
    <div class="card__inner "> 
        <div class="card__side card1 card__side-front">FRONT</div>
        <div class="card__side card1 card__side-back">BACK</div>
    </div>  
  </div>
</section>

CSS

.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);
    }
}

JS

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

提前致谢

Answer 1

看看这个https://codepen.io/jasinth5/pen/GxBqEd

我已经从 class back 中删除了 transform，将 flipped class 添加到 BACK 并将这个 js 应用到这个中

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