Como Funcionam as Cartas

transform: rotateY(180deg);

Esta propriedade gira o elemento 180 graus no eixo Y, criando o efeito de virar.

<input type="checkbox" id="..." class="...">

O checkbox escondido permite alternar o estado (marcado/não marcado) com um clique.

.flashcard-checkbox:checked ~ .flashcard-inner

O seletor :checked aplica estilos quando o checkbox está marcado, e o ~ seleciona o irmão seguinte.

transform-style: preserve-3d;

Esta propriedade permite que os elementos filhos mantenham sua posição no espaço 3D.

perspective: 1000px;

Esta propriedade no elemento pai define a intensidade do efeito 3D (quanto menor o valor, mais exagerado o efeito).

backface-visibility: hidden;

Esta propriedade esconde a "parte de trás" do elemento quando ele está virado para longe do espectador.

transition: all 0.5s ease;

Esta propriedade anima suavemente as mudanças de estilo ao longo de 0.5 segundos com curva de aceleração/desaceleração.

position: absolute;

Ambas as faces usam position: absolute dentro de um container com position: relative, ocupando exatamente o mesmo espaço.

<article class="flashcard">
  <input type="checkbox">
  <div class="flashcard-inner">
    <div class="flashcard-front"></div>
    <div class="flashcard-back"></div>
  </div>
</article>

1. O clique marca/desmarca o checkbox
2. O seletor :checked detecta a mudança
3. Aplica transform: rotateY(180deg) no container
4. As propriedades 3D criam o efeito de profundidade
5. A transição suaviza a animação