When cards are flipped it's showing the front of the card upside down instead of the back.

[J0914]

This has happened in the last couple of months.

[erickdcohen]

I ran into a similar error a few days ago. There was a glitch where I would click on the object and the opposite side would show backwards.

TLDR; The glitch was solved for me was when css overflow property was set to hidden: overflow: hidden;

---

My original code was as follows: React:

   <ReactCardFlip isFlipped={isFlipped} flipDirection='horizontal'>

       {/* Front side*/}
      <StyledCodeCard onClick={handleClick}>
        <h2>FRONT SIDE</h2>
      </StyledCodeCard>

       {/* Back Side side*/}
      <StyledCodeCard onClick={handleClick}>
        <h3>BACK SIDE</h3>
      </StyledCodeCard>

    </ReactCardFlip>

and my css within styled component:

export const StyledCodeCard = styled.div`
  background-color: #fff;
  padding: 10px;
  border-radius: 15px;
  margin: 45px 75px;
  width: 400px;
  height: 75px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;

  &:hover {
    cursor: pointer;
    transform: scale(1.2);
    transition: transform 0.3s;
  }
`;

My h2 tag was too big so there was overflow.

When I changed my css to add overflow: hidden; the problem was solved:

export const StyledCodeCard = styled.div`
  background-color: #fff;
  overflow: hidden; {/* NEW TO FIX OVERFLOW*/}
  padding: 10px;
  border-radius: 15px;
  margin: 45px 75px;
  width: 400px;
  height: 75px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;

  &:hover {
    cursor: pointer;
    transform: scale(1.2);
    transition: transform 0.3s;
  }
`;

The problem was solved after that addition. Hope it helps!

[tamaracosta]

Thank you!!!