Fazer um card com efeito flip 3D com CSS

51d 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>

Basicamente, adicionamento uma div para frente e outra para o verso do card, .card-inner que vai receber os efeitos 3D e .card que vai ser o container de tudo isso.

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)