CODEWITHSUNDEEP
javascripthtmlcss
DXXPublic
DXXPublic

Reputation: 19

Flip Card not showing back side

Im learning webdev and in one the projects im working on i have to build a flip-card using css.

I have done it and its working fine when i flip it on hover. I want to be able to flip it on click but when i click it the back side is not showing.

Can anyone point out what am i doing wrong?

Thanks

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

Thanks in advance

Upvotes: 0

Views: 364

Answers (1)

jasinth premkumar
jasinth premkumar

Reputation: 1413

check out this https://codepen.io/jasinth5/pen/GxBqEd

i have removed transform from class back,added flipped class to BACK and applied this js into this

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

Upvotes: 1

Related Questions