3D & Depth

Painéis dispostos em anel giram em torno de um eixo vertical no espaço 3D.

Adicione um carrossel 3D ("3D Carousel", também chamado rotating ring carousel) em [onde].
Organize os painéis em um anel visto em perspectiva; cada clique em próximo deve girar o anel inteiro suavemente em torno do eixo vertical para trazer o painel seguinte para a frente.
Deixe os controles acessíveis pelo teclado, anuncie o painel atual aos leitores de tela e use um fade simples se o usuário preferir movimento reduzido (prefers-reduced-motion).

Uma Terra 3D giratória com marcadores ou arcos fica no layout.

Adicione um globo 3D ("3D Globe", também chamado interactive globe) em [onde].
Um globo com alguns marcadores na superfície deve girar lenta e constantemente em torno do eixo, com os marcadores girando junto: calmo e contínuo.
Mantenha-o decorativo com uma alternativa em texto para as informações que mostra, pause quando estiver fora da tela e pare a rotação se o usuário preferir movimento reduzido (prefers-reduced-motion).

Um card se inclina para trás em perspectiva ao passar o ponteiro, enquanto um pino e um brilho sobem em direção ao espectador.

Adicione um efeito de hover "3D Pin" (também chamado pin hover 3D) em [onde].
Quando o ponteiro estiver sobre o card, ele deve se inclinar para trás em perspectiva enquanto um pino com um brilho suave na base sobe do centro; tudo volta ao lugar quando o ponteiro sai: suave, sem quique.
Mantenha inalterado o espaço do card no layout e mostre o mesmo efeito no foco do teclado.

Um card gira em perspectiva em direção ao ponteiro, com o conteúdo em camadas se destacando da superfície.

Adicione um efeito "3D Tilt" (também chamado perspective tilt ou tilt card) em [onde].
O card deve se inclinar em perspectiva em direção ao ponteiro enquanto ele se move, com as camadas internas se destacando da superfície em profundidades diferentes, e voltar a ficar plano suavemente quando o ponteiro sai: suave e sutil.
Mantenha a inclinação leve para o texto continuar legível e deixe o card plano em telas touch e 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.

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.

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

Um brilho intenso segue o ponteiro pela superfície de um card como um reflexo.

Adicione um efeito "Glare / Holographic Card" (também chamado glare card ou glare hover) em [onde].
Um brilho suave e intenso deve seguir o ponteiro pela superfície do card como luz refletida nele, enquanto o card se inclina um pouco em direção ao ponteiro; os dois somem quando o ponteiro sai: suave e sutil.
Deixe os cliques passarem pela camada do brilho, mantenha o conteúdo legível por baixo e mostre o card sem brilho em telas touch.