Flip In

O elemento dá uma volta completa no eixo Y enquanto se aproxima um pouco de quem vê e volta.

Adicione uma animação "Flip" em [onde].
O elemento deve dar uma volta completa no seu eixo vertical enquanto se aproxima um pouco de quem vê, e depois voltar com uma leve diminuição de tamanho: animado, mas breve.
Dê perspectiva para o giro parecer ter profundidade, reproduza só uma vez em vez de em loop, e pule o giro se o usuário preferir movimento reduzido (prefers-reduced-motion).

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 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).

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 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).

O elemento salta de um estado pequeno e inclinado, passa do ponto e se acomoda como um boneco de mola saindo da caixa.

Adicione uma animação de entrada "Jack In The Box" em [onde].
O elemento deve saltar de um estado minúsculo e inclinado, ancorado na borda inferior, balançar de um lado para o outro passando da vertical e se acomodar: elástico e divertido.
Reproduza só uma vez e mostre o elemento no lugar sem movimento se o usuário preferir movimento reduzido (prefers-reduced-motion).