3D Carousel (carrossel 3D)
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
Prompt
Substitua [onde] pela parte da sua página e cole o prompt no seu agente de IA. Cada prompt traz o nome da animação, então da próxima vez basta pedir pelo nome.
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).Animações parecidas
ABCDE
Arraste
Coverflow
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.A
B
C
Clique
Carousel Slide (carrossel)
Também chamada Slider, Swipe carousel, Scroll-snap carousel
Os slides passam na horizontal por uma área visível, encaixando um item de cada vez.
Onde usar
Banners de hero, galerias de produtos
Adicione um carrossel ("Carousel Slide", também chamado slider ou swipe carousel) em [onde].
Cada passo deve deslizar a fileira para o lado para que o próximo slide se encaixe no centro, suave e desacelerando, com os vizinhos aparecendo nas bordas e os pontos de posição acompanhando.
Avance um slide por vez, aceite deslizar no toque além de botões e setas do teclado, e coloque rótulos nos controles para leitores de tela.ABCD
Clique
Cube Rotate
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).Mais em 3D & Depth
3D Globe (globo 3D)
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).A
Passe o mouse por cima
3D Pin
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.A
Mova o ponteiro aqui
3D Tilt
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).