Criar uma animação de inversão de CSS

As animações CSS são muito divertidas; a beleza delas é que, por meio de muitas propriedades simples, é possível criar qualquer coisa, desde um elegante efeito de fade in até um efeito WTF-Pixar-ficaria-orgulhoso. Um efeito CSS intermediário é o efeito CSS flip, em que há conteúdo tanto na frente quanto atrás de um determinado contêiner. Este tutorial mostrará ao senhor como criar esse efeito da maneira mais simples possível.

Observação rápida: este não é o primeiro tutorial sobre esse efeito, mas achei os outros muito complicados. Muitos outros tutoriais acrescentam estilos adicionais a exemplos de código que, em seguida, exigem que o leitor decifre quais são necessários e quais não são. Este tutorial evita esse problema, fornecendo apenas os estilos necessários; o senhor pode embelezar cada lado do flip da maneira que desejar.

O HTML

A estrutura HTML para realizar o efeito de dois lados é como o senhor espera que seja:

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
	<div class="flipper">
		<div class="front">
			<!-- front content -->
		</div>
		<div class="back">
			<!-- back content -->
		</div>
	</div>
</div>

Há dois painéis de conteúdo, “front” e “back”, como seria de se esperar, mas também dois elementos contendo funções muito específicas explicadas por seu CSS. Observe também o ontouchstart que permite que os painéis sejam trocados em telas sensíveis ao toque. Obviamente, o senhor deve dividir esse código em um bloco JavaScript separado e discreto, se desejar.

O CSS

Aposto que, além do inchaço habitual do prefixo do fornecedor, o senhor se surpreenderia com a pouca quantidade de CSS envolvida:

/* entire container, keeps perspective */
.flip-container {
	perspective: 1000px;
}
	/* flip the pane when hovered */
	.flip-container:hover .flipper, .flip-container.hover .flipper {
		transform: rotateY(180deg);
	}

.flip-container, .front, .back {
	width: 320px;
	height: 480px;
}

/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;

	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;

	position: absolute;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.front {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
	transform: rotateY(180deg);
}

Aqui está uma visão geral aproximada do processo:

• O contêiner externo define a área de animação inteira do perspectiva
• O contêiner interno é o elemento que realmente gira, girando 180 graus quando se passa o mouse sobre o contêiner pai. É aqui também que o senhor controla a velocidade de transição. Alterar a rotação para -180 graus faz com que os elementos girem na direção inversa.
• Os elementos frontais e traseiros são posicionados de forma absoluta para que possam “sobrepor” um ao outro na mesma posição; seus backface-visibility está oculto para que a parte de trás dos elementos invertidos não seja exibida durante a animação
• O elemento frontal tem um índice z mais alto do que o elemento posterior, portanto, o elemento frontal pode ser codificado primeiro, mas ainda é exibido na parte superior
• O elemento traseiro é girado em 180 graus, de modo a atuar como parte traseira.

Isso é realmente tudo o que o senhor precisa! Coloque essa estrutura simples no lugar e depois estilize cada lado como o senhor quiser!

Uma observação da especialista em animação CSS Ana Tudor

Aplicação de determinadas propriedades com determinados valores (como overflow: hidden) no elemento do cartão não permitiria que ele tivesse filhos transformados em 3D. Acredito que isso seja relevante porque tive problemas com o overflow: hidden precisamente nesses casos, em que todos os filhos do elemento transformado em 3D estavam no mesmo plano, mas um ou mais tinham sido girados pelo 180deg.

CSS Flip Toggle

Se o senhor preferir que o elemento seja ativado apenas por comando via JavaScript, uma simples alternância de classe CSS será suficiente:

.flip-container:hover .flipper, .flip-container.hover .flipper, .flip-container.flip .flipper {
	transform: rotateY(180deg);
}

Ao adicionar a classe flip ao elemento do contêiner, o cartão será virado usando JavaScript, sem necessidade de passar o mouse sobre o usuário. Um comentário JavaScript como document.querySelector("#myCard").classList.toggle("flip") fará a inversão!

Inversão vertical do CSS

Realizar uma inversão vertical é tão fácil quanto inverter o eixo e adicionar o transform-origin valor do eixo. A origem da inversão deve ser atualizada e o cartão deve ser girado para o outro lado:

.vertical.flip-container {
	position: relative;
}

	.vertical .back {
		transform: rotateX(180deg);
	}

	.vertical.flip-container .flipper {
		transform-origin: 100% 213.5px; /* half of height */
	}

	.vertical.flip-container:hover .flipper {
		transform: rotateX(-180deg);
	}

O senhor pode ver que o X é usado, e não o acesso Y.

Suporte ao Internet Explorer

O Internet Explorer exige modificações significativas no código padrão do flip porque ainda não implementou todos os recursos modernos do transform modernas. Essencialmente, os elementos da frente e de trás precisam ser invertidos ao mesmo tempo:

/* entire container, keeps perspective */
.flip-container {
	perspective: 1000px;
	transform-style: preserve-3d;
}
	/*  UPDATED! flip the pane when hovered */
	.flip-container:hover .back {
		transform: rotateY(0deg);
	}
	.flip-container:hover .front {
	    transform: rotateY(180deg);
	}

.flip-container, .front, .back {
	width: 320px;
	height: 480px;
}

/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;

	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;
	transition: 0.6s;
	transform-style: preserve-3d;

	position: absolute;
	top: 0;
	left: 0;
}

/*  UPDATED! front pane, placed above back */
.front {
	z-index: 2;
	transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
	transform: rotateY(-180deg);
}

/* 
	Some vertical flip updates 
*/
.vertical.flip-container {
	position: relative;
}

	.vertical .back {
		transform: rotateX(180deg);
	}

	.vertical.flip-container:hover .back {
	    transform: rotateX(0deg);
	}

	.vertical.flip-container:hover .front {
	    transform: rotateX(180deg);
	}

Com o código acima, o IE10 girará os elementos como esperado!

A animação CSS flip sempre foi um exemplo clássico e representativo do que é possível fazer com as animações CSS e, em menor escala, com as animações CSS 3D. O melhor é que, na verdade, há muito pouco CSS envolvido. Esse efeito seria muito bom para jogos em HTML5 e, como um efeito de “cartão” autônomo, é perfeito. O senhor consegue pensar em alguma outra coisa para a qual usaria esse efeito?