Fazer um card com efeito flip 3D com CSS
31d atrás
Neste tutorial, vamos fazer um efeito 3D, que revela o verso de um card ao passar o mouse, usando apenas #CSS puro.
Comece adicionando o seguinte HTML:
<div class="card">
<div class="card-inner">
<div class="card-front">Frente</div>
<div class="card-back">Verso</div>
</div>
</div>
Agora vamos para o CSS, primeiro definindo a altura do card, e o efeito de rotação 3D:
.card {
width: 300px;
height: 300px;
perspective: 1200px;
}
.card:hover .card-inner {
transform: rotateY(180deg);
}
Agora, definiremos a altura e largura da frente e verso, e rotacionaremos o verso em 180 graus.
.card-back, .card-front {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.card-back {
background-color: lightblue;
transform: rotateY(180deg);
}
.card-front {
background-color: lightgreen;
}
Por último, vamos definir o tempo de transição dos efeitos 3d:
.card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 1s;
transform-style: preserve-3d;
}
E aqui está o resultado e o código completo:
Comentários (0)