Como ele é
É uma caixa em 3D que gira em torno de um eixo, com uma foto ou um vídeo em cada lado, como um cubo de fotos de mesa. Arraste no sentido do giro e o cubo acompanha o dedo ou o mouse com uma leveza de mola; ao soltar, ele se encaixa na face mais próxima. Pelos botões de anterior e próximo ou pelas setas do teclado, o quarto de volta começa devagar, acelera e freia no fim. O eixo pode ser horizontal ou vertical, e o cubo passa por quantos itens você quiser, trocando a face de trás a cada giro. Vídeos tocam mudos e em loop.
Você pode estar procurando isto se pediu algo assim
- cubo 3D com fotos que gira quando arrasto
- mostrar o produto de vários ângulos girando como uma caixa
- carrossel em 3D de imagens que dá para girar com o dedo
- antes e depois nas faces de um cubo que vira
- galeria que gira como um dado, mostrando uma foto por vez
- cubo girando com um vídeo em cada lado para o portfólio
Também chamado de
- galeria em cubo
- carrossel em cubo
- cubo 3D
- 3D cube slider
- cubo de fotos
- cubo giratório
- rotating cube gallery
Quando usar
- Mostrar um produto por quatro ângulos numa página de venda
- Antes e depois de um serviço, como reforma ou tratamento estético
- Destaque de portfólio com fotos e vídeos curtos
- Seções de lançamento que pedem um elemento 3D leve, sem WebGL
Quando evitar
- Galerias grandes em que a pessoa quer ver várias fotos ao mesmo tempo
- Imagens com texto importante, que fica distorcido durante o giro
Como pedir para a sua IA
Crie um carrossel em forma de cubo 3D para mostrar meu produto por quatro ângulos: arrastar com o dedo ou o mouse gira o cubo e encaixa na face mais próxima ao soltar, setas do teclado, botões de anterior e próximo, vídeos mudos em loop e troca sem animação para movimento reduzido.
Com o THM Componentes, você cola o prompt completo do catálogo junto com o código deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Porta-retrato
Porta-retrato funciona no celular?
Sim. Porta-retrato usa eventos de ponteiro e reserva para si o gesto de toque, então arrastar com o dedo gira o cubo, que se encaixa na face mais próxima ao soltar. Na demo, o cubo fica menor em telas estreitas. Vídeos tocam mudos, em loop e dentro da página.
Porta-retrato respeita quem prefere menos movimento?
Sim, em parte. Com a redução de movimento ativada no sistema, Porta-retrato troca de face na hora quando o giro vem dos botões, das setas do teclado ou da reprodução automática. O arraste continua acompanhando o dedo, já que é a própria pessoa que move o cubo.
Dá para controlar Porta-retrato pelo teclado?
Sim. Porta-retrato recebe foco pelo Tab e gira com as setas do seu eixo, esquerda e direita no giro horizontal, cima e baixo no vertical. Uma região ao vivo anuncia o item atual e o total, com o texto alternativo da imagem, e os métodos next e prev permitem criar botões próprios.
