Também chamada Rotating ring carousel
Painéis dispostos em anel giram em torno de um eixo vertical no espaço 3D.
Onde usar
Galerias e vitrines de produtos
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).Também chamada Interactive globe
Uma Terra 3D giratória com marcadores ou arcos fica no layout.
Onde usar
Visuais de alcance global
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).Também chamada Pin hover 3D
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.
Onde usar
Cards de prévia de links
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.
Também chamada Perspective tilt, 3D card effect, Tilt card, Tilt on hover, Parallax tilt
Um card gira em perspectiva em direção ao ponteiro, com o conteúdo em camadas se destacando da superfície.
Onde usar
Cards de produto e de preços
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).
Também chamada Flip card, Card flip 3D, 3D flip on hover
Um card dá meia-volta em torno de um eixo para revelar o verso.
Onde usar
Cards de equipe, flashcards, detalhes de preços
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.
Também chamada Stacked cards, Cards effect
Os cards se empilham com pequenos deslocamentos e o de cima se afasta para revelar o próximo.
Onde usar
Depoimentos, pilhas de cards para deslizar
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).
Também chamada Cover flow carousel
O item central fica de frente enquanto os laterais se inclinam em perspectiva.
Onde usar
Carrosséis de álbuns e mídia
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.
Também chamada 3D cube, Cube transition
O conteúdo fica nas faces de um cubo que gira para mostrar a próxima face.
Onde usar
Transições de slider, seletores de recursos
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).
Também chamada Glare hover, Glare card, Magic card, Glare
Um brilho intenso segue o ponteiro pela superfície de um card como um reflexo.
Onde usar
Cards premium ou colecionáveis
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.