Flip

Um card dá meia-volta em torno de um eixo para revelar o verso.

Adicione um efeito "Card Flip" (também chamado flip card ou card flip 3D) em [onde].
Quando o ponteiro estiver sobre o card, ele deve virar em perspectiva em torno do eixo vertical para mostrar o verso, e voltar quando o ponteiro sai: suave e constante.
Esconda o lado de trás de cada face para que uma nunca apareça através da outra, e faça o giro funcionar no foco do teclado e com um toque em telas touch.

O elemento gira em 3D no eixo horizontal ou vertical, de lado até ficar de frente para quem vê.

Adicione uma animação de entrada "Flip In" (também chamada flip in X ou flip in Y) em [onde].
O elemento deve começar de lado e girar no eixo horizontal até ficar de frente, passando um pouco do ponto e voltando antes de se acomodar: rápido, com uma pequena oscilação.
Dê perspectiva para o giro parecer ter profundidade, e mostre de frente sem movimento se o usuário preferir movimento reduzido (prefers-reduced-motion).

Letras ou palavras giram em 3D em torno de um eixo para mostrar o próximo texto no verso.

Adicione um efeito de hover "Text 3D Flip" (também chamado 3D flip text reveal) em [onde].
Quando o ponteiro estiver sobre o texto, cada letra deve girar em 3D no eixo horizontal para mostrar uma letra nova no outro lado, uma após a outra em uma varredura rápida e suave, e voltar quando o ponteiro sair.
Mantenha a caixa de texto do mesmo tamanho durante o giro e mostre o mesmo efeito no foco do teclado.

O elemento gira em 3D até ficar de lado e invisível.

Adicione uma animação de saída "Flip Out" (também chamada flip out X ou flip out Y) em [onde].
O elemento deve se inclinar um pouco para trás e depois girar no eixo vertical até ficar de lado e sumir: rápido e preciso.
Dê perspectiva para o giro parecer ter profundidade, remova o elemento só depois que o giro terminar, e oculte na hora se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento gira em uma dobradiça no canto superior esquerdo, balança e depois cai para fora da tela.

Adicione uma animação de saída "Hinge" em [onde].
O elemento deve despencar a partir do canto superior esquerdo como se um parafuso tivesse se soltado, balançar para lá e para cá e depois cair para fora da tela enquanto desaparece: lento, cômico e deliberado.
Deixe-o cair por cima do resto do conteúdo sem empurrar o layout nem criar barras de rolagem, remova depois que ele cair, e oculte na hora se o usuário preferir movimento reduzido (prefers-reduced-motion).