0

This is supposed to be a memory game with cards with text on them.

The cards on the front should just be white (the background-image) and at the back there is a word. But since applying the backface-visibility-hidden, it actually just shows the background image and no text.

It supposed to have text only on the back, but out of curiosity I have placed text on one card on the back and on the front, only this one shows text from the front, but after flipping it does not show the back text, but only the mirror image of the front.

I have read the IE might cause problems, but not in this case, as it does not work in any browser.

I have tried playing with preserve-3d, but nothing brings me a solution.

<section class="memory-game">
      <div class="memory-card">
        <p class="front">un abricot</p>
        <p class="back"></p>
      </div>
</section>

.memory-game {
  
  perspective: 1000px;
}

.memory-card {
  
  position: relative;
  transform: scale(1);
  transition: transform 0.4s;
}

.memory-card:active {
  transform: scale(0.95);
  transition: transform 0.4s;
}

.memory-card.flip {
  transform: rotateY(180deg);
}

.front,
.back {
  position: absolute;
  background-image: url("image.jpg");
  backface-visibility: hidden;
}

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

back

front

disappearing half

Timi Xi
  • 7
  • 3

1 Answers1

1

As you say, the solution is to add preserve-3d.

See it working in the snippet

.memory-game {
  
  perspective: 1000px;
}

* {
    transform-style: preserve-3d;
}

.memory-card {
  
  position: relative;
  transform: scale(1);
  transition: transform 0.4s;
  border: solid 1px black;
  height: 50px;
  width: 200px;
}

.memory-card:active {
  transform: scale(0.95);
  transition: transform 0.4s;
}

body:hover .memory-card  {
  transform: rotateY(180deg);
}

.front,
.back {
  position: absolute;
  background-image: url("image.jpg");
  backface-visibility: hidden;
}

.front {
  transform: rotateY(180deg);
}
<section class="memory-game">
      <div class="memory-card">
        <p class="front">FRONT</p>
        <p class="back">BACK</p>
      </div>
</section>
vals
  • 61,425
  • 11
  • 89
  • 138
  • Yes, this works. Thank you so much. I have applied this and added my styling step by step. The backdrop-filter: blur(5px) saturate(120%); that I also have included as well as many other stylings is messing it up. I do not know why, though... I wanted to have a margin blured and in the background the white image, but I guess I am going have to just make a png with transparency. – Timi Xi Jan 13 '22 at 11:36
  • Filters are applied on a "flattened" version of the elements, so it is not possible to have both things (the filter and the preserve-3d) – vals Jan 13 '22 at 11:53
  • Ok, I get it, I guess. Never can have it all... :) – Timi Xi Jan 13 '22 at 11:57
  • Just one thing is happening now. After clicking one half of the card disappears and shows up only after completing the transform as I posted in the edit part of my post, at the bottom. – Timi Xi Jan 13 '22 at 11:59
  • Ok, adding preserve-3d only to the parent element fixed it all. – Timi Xi Jan 13 '22 at 12:03