Card flip not showing back. Front stays visible when flipped

January 31, 2022

I am trying to create a flip card to maximize space on a webpage. When I toggle the flipCard function, the card flips but doesn’t show the back and the front remains visible but is mirrored. Does anyone know why this is happening? The front of the card will consist of headings and the back is a UL.

Thanks for any help and your time!

const card = document.getElementById("card")

card.addEventListener("click", flipCard);

function flipCard() {
  card.classList.toggle("flipCard");
}

.cards {
    background: linear-gradient(
    to bottom,
    rgba(52, 52, 52, 0.4),
    rgba(52, 52, 52, 0.1));
    backdrop-filter: blur(10px);
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    position: relative;
    transform-style: preserve-3d;
    transition: all 0.8s ease;
    z-index: 10;
    perspective: 1000px;
    width: 400px;
}


.card-front {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    backface-visibility: hidden;
    z-index: 0;
}

.card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: rotateY(180deg);
    backface-visibility: hidden;
    z-index: 0;
}

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

.card.b {
    flex-direction: column;
}

.ul-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    font-size: 12px;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.2;
    padding: 3px;
    grid-gap: 0.5rem;
    position: relative;
}

.d {
    grid-column: 2;
    grid-row: 6;
    padding: 0 2rem;
}

.d li {
    font-family: 'Oswald', sans-serif;
    font-size: 1rem;
}

<div id="card" class="cards d">
            <div class="card-front">
                <h1>
                    This is the front!
                </h1>
            </div>
            <div class="card-back ul-grid">
                <ul><span class="text-secondary">SM.PINKY</span>
                <li><span class="text-alt">(1)</span> $1.50</li>
                <li><span class="text-alt">(6)</span> $8.50</li>
                <li><span class="text-alt">(12)</span> $16</li>
                </ul>
                <ul><span class="text-secondary">PINKY</span>
                <li><span class="text-alt">(1)</span> $1.50 </li>
                <li><span class="text-alt">(6)</span> $8.50 </li>
                <li><span class="text-alt">(12)</span> $16 </li>
                </ul>
                <ul><span class="text-secondary">FUZZY</span>
                <li><span class="text-alt">(1)</span> $2.00 </li>
                <li><span class="text-alt">(6)</span> $11.50</li>
                <li><span class="text-alt">(12)</span> $22</li>
                </ul>
                <ul><span class="text-secondary">HOPPER</span>
                <li><span class="text-alt">(1)</span> $2.50 </li>
                <li><span class="text-alt">(6)</span> $14.50</li>
                <li><span class="text-alt">(12)</span> $28</li>
                </ul>
                <ul><span class="text-secondary">SMALL</span>
                <li><span class="text-alt">(1)</span> $3.00 </li>
                <li><span class="text-alt">(6)</span> $17.50</li>
                <li><span class="text-alt">(12)</span> $34</li>
                </ul>
                <ul><span class="text-secondary">MEDIUM</span>
                <li><span class="text-alt">(1)</span> $3.50 </li>
                <li><span class="text-alt">(6)</span> $20.50</li>
                <li><span class="text-alt">(12)</span> $40</li>
                </ul>
                <ul><span class="text-secondary">LARGE</span>
                <li><span class="text-alt">(1)</span> $4.00 </li>
                <li><span class="text-alt">(6)</span> $23.50</li>
                <li><span class="text-alt">(12)</span> $46</li>
                </ul>
                <ul><span class="text-secondary">JUMBO</span>
                <li><span class="text-alt">(1)</span> $4.50 </li>
                <li><span class="text-alt">(6)</span> $26.50</li>
                <li><span class="text-alt">(12)</span> $52</li>
                </ul>  
            </div>
        </div>

>Solution :

i don’t know why but removing the backdrop-filter make it working.

please read more about this problem from this postenter link description here

and you can user -webkit-backdrop-filter: blur(10px); as a work around
i updated the code

const card = document.getElementById("card")

card.addEventListener("click", flipCard);

function flipCard() {
  card.classList.toggle("flipCard");
}

.cards {
    background: linear-gradient(
    to bottom,
    rgba(52, 52, 52, 0.4),
    rgba(52, 52, 52, 0.1));
    /*backdrop-filter: blur(10px);*/
    -webkit-backdrop-filter: blur(10px);
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    position: relative;
    transform-style: preserve-3d;
    transition: all 0.8s ease;
    z-index: 10;
    perspective: 1000px;
    width: 400px;
}


.card-front {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    backface-visibility: hidden;
    z-index: 0;
}

.card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: rotateY(180deg);
    backface-visibility: hidden;
    z-index: 0;
}

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

.card.b {
    flex-direction: column;
}

.ul-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    font-size: 12px;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.2;
    padding: 3px;
    grid-gap: 0.5rem;
    position: relative;
}

.d {
    grid-column: 2;
    grid-row: 6;
    padding: 0 2rem;
}

.d li {
    font-family: 'Oswald', sans-serif;
    font-size: 1rem;
}

<div id="card" class="cards d">
            <div class="card-front">
                <h1>
                    This is the front!
                </h1>
            </div>
            <div class="card-back ul-grid">
                <ul><span class="text-secondary">SM.PINKY</span>
                <li><span class="text-alt">(1)</span> $1.50</li>
                <li><span class="text-alt">(6)</span> $8.50</li>
                <li><span class="text-alt">(12)</span> $16</li>
                </ul>
                <ul><span class="text-secondary">PINKY</span>
                <li><span class="text-alt">(1)</span> $1.50 </li>
                <li><span class="text-alt">(6)</span> $8.50 </li>
                <li><span class="text-alt">(12)</span> $16 </li>
                </ul>
                <ul><span class="text-secondary">FUZZY</span>
                <li><span class="text-alt">(1)</span> $2.00 </li>
                <li><span class="text-alt">(6)</span> $11.50</li>
                <li><span class="text-alt">(12)</span> $22</li>
                </ul>
                <ul><span class="text-secondary">HOPPER</span>
                <li><span class="text-alt">(1)</span> $2.50 </li>
                <li><span class="text-alt">(6)</span> $14.50</li>
                <li><span class="text-alt">(12)</span> $28</li>
                </ul>
                <ul><span class="text-secondary">SMALL</span>
                <li><span class="text-alt">(1)</span> $3.00 </li>
                <li><span class="text-alt">(6)</span> $17.50</li>
                <li><span class="text-alt">(12)</span> $34</li>
                </ul>
                <ul><span class="text-secondary">MEDIUM</span>
                <li><span class="text-alt">(1)</span> $3.50 </li>
                <li><span class="text-alt">(6)</span> $20.50</li>
                <li><span class="text-alt">(12)</span> $40</li>
                </ul>
                <ul><span class="text-secondary">LARGE</span>
                <li><span class="text-alt">(1)</span> $4.00 </li>
                <li><span class="text-alt">(6)</span> $23.50</li>
                <li><span class="text-alt">(12)</span> $46</li>
                </ul>
                <ul><span class="text-secondary">JUMBO</span>
                <li><span class="text-alt">(1)</span> $4.50 </li>
                <li><span class="text-alt">(6)</span> $26.50</li>
                <li><span class="text-alt">(12)</span> $52</li>
                </ul>  
            </div>
        </div>