Como criar: cartão flip

Como criar um cartão flip

Primeiro passo - Adicionar HTML:

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <img src="img_avatar.png" alt="Avatar" style="largura:300px;altura:300px;">
    </div>
    <div class="flip-card-back">
      <h1>Bill Gates</h1>
      <p>Arquiteto & Engenheiro</p>
      <p>Nós amamos esse cara</p>
    </div>
  </div>
</div>

Segunda etapa - Adicionar CSS:

/* Contêiner da carta giratória - defina a largura e altura desejadas. Adicionamos a propriedade borda para demonstrar que a rolagem ultrapassa o contêiner ao passar o mouse (se você não quiser efeito 3D, remova a perspetiva) */
.flip-card {
  cor-fundo: transparent;
  largura: 300px;
  altura: 200px;
  borda: 1px sólido #f1f1f1;
  perspectiva: 1000px; /* Se você não quiser efeito 3D, remova-o */
}
/* Este contêiner é usado para posicionar a parte frontal e a parte de trás */
.flip-card-inner {
  posição: relativo;
  largura: 100%;
  altura: 100%;
  alinhamento-texto: centro;
  transição: transformar 0.8s;
  estilo-transform: preservar-3d;
}
/* Quando o mouse estiver sobre o contêiner da carta giratória, faça rolagem horizontal */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}
/* Posicionando a parte frontal e a parte de trás */
.flip-card-front, .flip-card-back {
  posição: absoluto;
  largura: 100%;
  altura: 100%;
  -webkit-visibilidade-lado-inverso: escondida; /* Safari */
  visibilidade-lado-inverso: escondida;
}
/* Definindo o estilo da parte frontal (se a imagem estiver ausente, será usada como reserva) */
.flip-card-front {
  cor-fundo: #bbb;
  cor: preto;
}
/* Definindo o estilo da parte de trás */
.flip-card-back {
  cor-fundo: dodgerblue;
  cor: branco;
  transform: rotateY(180deg);
}

Experimente você mesmo