Como criar: Caixa de flip 3D
- Página anterior Zoom ao passar o mouse
- Próxima página Centralização vertical
Aprenda a usar CSS para criar uma caixa de flip.
Caixa de flip
Mova o mouse para o box abaixo e veja o efeito:
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); }
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); }
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
- Página anterior Zoom ao passar o mouse
- Próxima página Centralização vertical