# Porta-retrato Um cubo que gira com o arraste e mostra uma foto ou um vídeo em cada face. > Porta-retrato é um componente do THM Componentes que monta um carrossel em cubo 3D, com foto ou vídeo em cada face. Você arrasta com o mouse ou o dedo, e o cubo se encaixa na face mais próxima ao soltar; botões, setas do teclado e reprodução automática também giram o cubo. Usa só CSS 3D, sem WebGL. - Categoria: 3D e espaço - Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM - Peso no carregamento: Leve: CSS ou JavaScript leve, sem custo perceptível - Tecnologia: Vue 3, TypeScript, Tailwind CSS v4, Motion for Vue - Interação: Mouse, Toque, Teclado - URL: https://vibecode.thmtecnologia.com/componentes/porta-retrato/ ## 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 ```text 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. ## Componentes relacionados - [Coreto](https://vibecode.thmtecnologia.com/componentes/coreto/): Fotos dispostas em roda, como num cilindro, que você gira arrastando, com inércia e reflexo no chão. - [Ciclorama](https://vibecode.thmtecnologia.com/componentes/ciclorama/): Painéis de imagem grandes dispostos em anel, girando sem parar à sua volta, que você pode arrastar. - [Tirinha](https://vibecode.thmtecnologia.com/componentes/tirinha/): Cartões verticais em tela de celular que passam sozinhos, com barrinhas de progresso no topo e toque para avançar. - [Valete](https://vibecode.thmtecnologia.com/componentes/valete/): Cartão que gira 180 graus ao passar o mouse e mostra o verso, virando para o lado ou de cima para baixo. - [Retoque](https://vibecode.thmtecnologia.com/componentes/retoque/): Duas imagens ou telas sobrepostas e uma linha no meio que você move com o mouse ou o dedo para comparar. --- THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.