# Valete Cartão que gira 180 graus ao passar o mouse e mostra o verso, virando para o lado ou de cima para baixo. > Valete é um componente do THM Componentes com frente e verso: ao passar o mouse, o cartão gira 180 graus em meio segundo e mostra o conteúdo de trás. O giro pode ser para o lado ou de cima para baixo, feito só com CSS 3D. Serve para equipes, serviços, perguntas frequentes visuais e cartões de produto. - Categoria: Cartões e superfícies - 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 - Interação: Mouse - URL: https://vibecode.thmtecnologia.com/componentes/valete/ ## Como ele é Funciona como virar uma carta de baralho sobre a mesa. Na frente fica o que você quiser, como uma foto com o nome por cima; no verso, um painel preto semitransparente com texto claro e espaçamento interno. Ao passar o mouse, o cartão gira 180 graus em meio segundo, com perspectiva 3D, e o verso aparece; ao tirar o mouse, ele volta. Por padrão o giro é para o lado, mas também pode ser de cima para baixo, como um calendário de mesa. O tamanho padrão é de 224 por 288 pixels, com cantos bem arredondados. ## Você pode estar procurando isto se pediu algo assim - “card que vira e mostra outra coisa atrás quando passo o mouse” - “cartão com frente e verso para apresentar a equipe” - “efeito de virar carta de baralho no site” - “foto na frente e descrição no verso do card” - “perguntas frequentes em cards que viram para mostrar a resposta” - “card de serviço que gira e mostra o preço por trás” ## Também chamado de flip card, card que vira, cartão frente e verso, card flip 3D, card giratório, flip animation ## Quando usar - Página de equipe com foto na frente e minibiografia no verso - Lista de serviços com o nome na frente e detalhes ou preço atrás - Perguntas frequentes visuais, com a pergunta na frente e a resposta no verso - Cartões de produto ou de benefício em landing page ## Quando evitar - Conteúdo essencial só no verso, já que o giro depende do hover e o original não trata toque nem foco - Textos longos no verso, que ficam espremidos no tamanho padrão do cartão ## Como pedir para a sua IA ```text Crie um flip card com frente e verso que gira 180 graus no hover, com perspectiva 3D. Quero que vire também com toque no celular e com o foco do teclado, use as cores do meu tema e tenha uma versão sem giro para quem prefere menos movimento. ``` 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 Valete ### Valete funciona no celular? Na versão original, Valete vira só com hover, por CSS, sem tratamento de toque. No celular, o resultado depende de cada navegador, e o verso pode nem aparecer. O prompt do THM Componentes pede teste em mobile; vale pedir à IA para virar o cartão também com um toque e com o foco do teclado. ### Dá para virar Valete de cima para baixo? Sim. Valete tem a propriedade rotate: com y, o padrão, o cartão vira para o lado como uma carta; com x, vira de cima para baixo. A frente vai no conteúdo principal e o verso num espaço próprio chamado back, então cada lado pode ter foto, texto ou botões. ### Valete deixa o site lento? Não costuma deixar. Valete usa só transformação 3D e transição de CSS, sem JavaScript de animação, e tem peso Leve no THM Componentes. Em grades com muitos cartões, o que mais pesa costuma ser o tamanho das imagens da frente, não o giro. ## Componentes relacionados - [Camafeu](https://vibecode.thmtecnologia.com/componentes/camafeu/): Um cartão que inclina seguindo o mouse e faz imagem, título e botões saltarem em camadas de profundidade. - [Porta-retrato](https://vibecode.thmtecnologia.com/componentes/porta-retrato/): Um cubo que gira com o arraste e mostra uma foto ou um vídeo em cada face. - [Avesso](https://vibecode.thmtecnologia.com/componentes/avesso/): Duas frases no mesmo lugar: uma linha vertical segue o mouse e mostra a outra frase de um lado dela. - [Furta-cor](https://vibecode.thmtecnologia.com/componentes/furta-cor/): Cartão com arte que inclina em 3D sob o mouse e brilha com reflexo arco-íris, como uma carta colecionável rara. - [Paetê](https://vibecode.thmtecnologia.com/componentes/paete/): Card escuro que ganha um reflexo de luz e um brilho de holograma que seguem o mouse, com leve inclinação. --- 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.