Como ele é
Imagine um carrossel de parque visto de frente, com fotos no lugar dos cavalinhos. Seis imagens de cantos arredondados formam um anel em perspectiva, com a câmera levemente inclinada de cima. A foto da frente aparece nítida e colorida; as que vão para trás ficam mais escuras, menos saturadas e transparentes. Embaixo de cada uma há um reflexo desfocado que some aos poucos, sobre um brilho suave no chão. Arrastando para o lado, o anel gira e desacelera até encaixar. Parado, ele gira sozinho bem devagar. Na base ficam as setas e os pontos; no canto, o contador.
Você pode estar procurando isto se pediu algo assim
- carrossel de imagens em 3D que gira quando arrasto
- galeria de fotos em roda que dá para girar com o dedo
- mostrar os projetos do portfólio girando em círculo
- vitrine de produtos em 3D sem deixar o site pesado
- fotos em volta de um cilindro com reflexo embaixo
- slider de imagens com perspectiva e profundidade
- aquele carrossel que gira em volta de um eixo, com profundidade
Também chamado de
- carrossel cilíndrico
- cylinder carousel
- galeria 3D
- rotating gallery
- galeria em cilindro
- carrossel giratório
- anel de fotos em perspectiva
Quando usar
- Portfólio de fotografia, design ou arquitetura
- Galeria de projetos ou de cases numa página de agência
- Vitrine de produtos com navegação pensada para o dedo
- Destaques de um evento, com fotos da edição anterior
Quando evitar
- Coleções grandes, em que girar foto a foto cansa; prefira uma grade com filtros
- Imagens com texto pequeno, que fica distorcido nas laterais em perspectiva
Como pedir para a sua IA
Crie um carrossel cilíndrico em 3D só com CSS para o portfólio: arrastar com inércia e encaixe, setas, pontos e teclado, reflexo suave no chão e giro automático lento quando ocioso, com pausa fora da tela e troca sem animação para quem prefere menos movimento.
Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Coreto
Coreto funciona no celular?
Sim. Coreto responde ao arraste horizontal do dedo e deixa a rolagem vertical da página livre, então a pessoa gira o anel sem travar a leitura. Como usa só CSS 3D, sem WebGL, o componente é classificado como Leve no THM Componentes, e o giro pausa quando o carrossel sai da tela.
Dá para navegar em Coreto pelo teclado?
Dá. Coreto recebe foco e gira com as setas para a esquerda e para a direita; os botões de anterior e próxima e os pontos de cada imagem são botões nativos. O contador anuncia a imagem atual ao leitor de tela, e cada foto tem texto alternativo com a sua posição.
Coreto respeita quem prefere menos movimento?
Sim. Com movimento reduzido ativo, Coreto não gira automaticamente e troca de imagem sem animação, indo direto ao cartão escolhido. Arrastar, setas e pontos continuam funcionando. Fora isso, o giro automático também para enquanto o mouse está sobre o carrossel.
