Question

我正在学习webdev，在我正在研究的项目中，我必须使用css构建一张翻转卡。

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

有谁可以指出我做错了什么？

由于

Codepen Here 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

我已经从类中删除了转换，将翻转的类添加到BACK并将此js应用到此

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

翻转卡未显示背面

1 个答案: