翻转卡不显示背面答案

【问题标题】：Flip Card not showing back side翻转卡不显示背面
【发布时间】：2018-04-04 00:44:02
【问题描述】：

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

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

谁能指出我做错了什么？

谢谢

在这里写代码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);
    }
}

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

提前致谢

【问题讨论】：

HTML 代码中没有包含 card__side 类的元素，您是说 card__inner 吗？
您只旋转一侧 [点击了前面的一侧] ...您需要同时旋转两侧，或将旋转应用于父级
@PatrickHund 类存在，他的代码是 SASS 代码
它存在于SASS代码中，是的，但不存在于HTML代码中，所以click事件监听器附加到一个空的元素集
它存在于HTML中

标签： javascript html css

【解决方案1】：

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

我已经从类后面删除了转换，将翻转类添加到 BACK 并将这个 js 应用到这个

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

【讨论】：