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
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.
