Como criar: Caixa de flip 3D

Aprenda a usar CSS para criar uma caixa de flip.

Caixa de flip

Mova o mouse para o box abaixo e veja o efeito:

HorizontalFlip:

Lado de frente
Lado de trás

Experimente pessoalmente

VerticalFlip:

Lado de frente
Lado de trás

Experimente pessoalmente

Como criar uma caixa de flip

Primeiro passo - Adicionar HTML:

<div class="flip-box">
  <div class="flip-box-inner">
    <div class="flip-box-front">
      <h2>Front Side</h2>
    </div>
    <div class="flip-box-back">
      <h2>Lado de Trás</h2>
    </div>
  </div>
</div>

Segundo passo - Adicionar CSS:

/* Caixa de rolamento - Defina a largura e altura desejadas. Adicionamos a propriedade border para demonstrar, quando o mouse estiver sobre a caixa, a rolagem ultrapassará a caixa (se não quiser efeito 3D, exclua perspective) */
.flip-box {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Se não precisar de efeito 3D, remova esta linha */
}
/* Este contêiner é usado para posicionar frontal e traseira */
.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
/* Quando o mouse se move sobre o contêiner da caixa de rolagem, realiza rolagem horizontal */
.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}
/* Posicionar frontal e traseira */
.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}
/* Definir o estilo da parte frontal */
.flip-box-front {
  background-color: #bbb;
  color: black;
}
/* Definir o estilo da parte de trás */
.flip-box-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}

Experimente pessoalmente

Rolagem vertical

Para fazer rolagem vertical em vez de horizontal, use rotateX método em vez de rotateY:

Exemplo

.flip-box:hover .flip-box-inner {
  transform: rotateX(180deg);
}
.flip-box-back {
  transform: rotateX(180deg);
}

Experimente pessoalmente

Atenção:Esses exemplos podem não funcionar corretamente em tablets e/ou smartphones.

Páginas relacionadas

Tutorial:Transformação 2D CSS

Tutorial:Transformação 3D CSS