Card Flip

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

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 conteúdo fica nas faces de um cubo que gira para mostrar a próxima face.

Adicione uma transição "Cube Rotate" (também chamada 3D cube ou cube transition) em [onde].
Coloque o conteúdo nas faces laterais de um cubo visto em perspectiva; cada clique em próximo deve girar o cubo suavemente em torno do eixo vertical para trazer a face seguinte para a frente.
Deixe só a face da frente acessível ao teclado e aos leitores de tela, e use um fade simples se o usuário preferir movimento reduzido (prefers-reduced-motion).

Os cards se empilham com pequenos deslocamentos e o de cima se afasta para revelar o próximo.

Adicione um "Card Stack" (também chamado stacked cards) em [onde].
Empilhe os cards com pequenos deslocamentos, um atrás do outro; cada clique deve afastar o card de cima para o lado e colocá-lo no fundo enquanto os outros avançam: suave, leve e rápido.
Faça funcionar pelo teclado, deixe os leitores de tela chegarem a cada card em ordem e use um fade simples se o usuário preferir movimento reduzido (prefers-reduced-motion).

O item central fica de frente enquanto os laterais se inclinam em perspectiva.

Adicione um carrossel "Coverflow" (também chamado cover flow carousel) em [onde].
O item central deve ficar de frente enquanto os de cada lado giram em perspectiva; arrastar para o lado desliza a fileira e, ao soltar, ela se acomoda suavemente no item mais próximo.
Suporte as setas do teclado e o gesto de deslizar além do arraste, e mantenha a rolagem vertical da página funcionando em telas touch.