CSS: Aprenda a Criar o Efeito de Flip Cards \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 04 Horas 34 Min 06 Seg Tempo restante da oferta: 04 34 06 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) CSS: Aprenda a Criar o Efeito de Flip Cards [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) # CSS: Aprenda a Criar o Efeito de Flip Cards Aprenda a criar o efeito de Flip Cards com CSS puro de maneira bem simples. [ Akira Hanashiro ](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) 7 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/09/05155045/Flip-Cards.png) Olá Web Developer! Hoje vamos aprender a criar o efeito de Flip Cards com CSS puro. Esse efeito é muito interessante, e nos permite fazer com que um elemento gire. É um ótimo exercício para estudar animações e transformação 3D com CSS. Veja como ficará o resultado: [ ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/10/E-BOOK-GRATUITO-HTML.jpg) ](https://www.treinaweb.com.br/ebook/guia-HTML/) ## Iniciando o Espaço 3D Como a animação CSS que vamos criar será 3D, precisamos criar um container para essa animação, indicando a sua profundidade. Vamos chamar esse container de `flip-container`. Ele servirá como o “espaço 3D” onde nossos elementos vão ficar. ```html ``` No CSS nós indicamos a profundidade do nosso container. Isso é feito com a propriedade `perspective`, que indica o quanto um objeto está longe do usuário. A profundidade é aplicada aos elementos filhos, e não ao próprio elemento com a propriedade de perspectiva. Também aproveitamos para definir a altura e largura desse elemento. ```css .flip-container { width: 300px; height: 200px; perspective: 1000px; } ``` Imagine esse container como o cubo da imagem abaixo: ![Container 3D de imagem](https://dkrn4sk0rn31v.cloudfront.net/2019/09/05081949/container-3d.png) ## Definindo o container das imagens Como queremos um efeito de um cartão que gira, vamos criar um elemento que será container das duas imagens. Imagine ele como o elemento laranja da imagem abaixo: ![Container de imagens 3D](https://dkrn4sk0rn31v.cloudfront.net/2019/09/05083609/container-de-imagens-3D.png) Portanto, é esse elemento que vamos girar depois. Vamos chamá-lo de `flipper` ```html ``` [ ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/06/BANNER-AULA-GRATUITA-1700x850-1.jpg) ](https://www.treinaweb.com.br/lp/aula-gratis/) Vamos definir sua largura e altura como 100%. Assim ele ficará com o mesmo tamanho do seu container. Para que ele mantenha a profundidade que definimos em seu elemento pai (`flip-container`) quando formos girá-lo, passamos o valor `preserve-3d` à propriedade `transform-style`. ```css .flipper{ width: 100%; height: 100%; transform-style: preserve-3d; } ``` ## Definindo a Parte da Frente e de Trás Para podermos separar melhor o que será frente e atrás, vamos criar um container para cada um: `front` e `back`. ```html ``` Assim será fácil reutilizar este efeito, pois basta colocarmos o que quisermos em cada uma das `divs`. Para este exemplo utilizarei uma imagem em cada `div`, mas você pode colocar o que quiser. ```html ``` ## Girando os elementos Já vou mostrar como girar os elementos para facilitar o entendimento do que faremos depois. Como dito anteriormente, o que vamos girar é o elemento `flipper`. Como queremos que ele mostre a outra face, girando na horizontal, vamos usar a propriedade `transform` e girá-lo 180 graus no eixo `Y`. ![Imagem 3D - eixo de rotação](https://dkrn4sk0rn31v.cloudfront.net/2019/09/05090849/Imagem-3D-eixo-de-rota%C3%A7%C3%A3o.png) Então basta adicionarmos `transform: rotateY(180deg)` ao elemento `flipper`. Podemos fazer isso de várias maneiras, como colocar essa propriedade em uma classe CSS e adicionar a classe no `flipper` em um clique. Neste exemplo faremos com que essa propriedade seja aplicada ao `flipper` assim que o usuário passar a seta do mouse em cima do elemento `flip-container`. ```css .flip-container:hover .flipper{ transform: rotateY(180deg); /* se quiser uma animação na vertical, troque por rotateX(180deg) */ } ``` [ ![C# - Orientação a Objetos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/c-sharp.svg) Curso C# - Orientação a Objetos Conhecer o curso ](https://www.treinaweb.com.br/curso/csharp-orientacao-a-objetos) Para que a rotação não ocorra de forma instantânea, e sim como uma transição, vamos adicionar o tempo de transição ao `flipper` com a propriedade `transition`. Vamos definir a velocidade da transição para a propriedade `transform` como 0,8 segundos. ```css .flipper{ width: 100%; height: 100%; transition: transform 0.8s; transform-style: preserve-3d; } ``` ## Arrumando a Posição dos Elementos Ficamos com uma `div` em cima e outra embaixo. Para que as duas fiquem na mesma posição, vamos definir `front` e `back` com `position: absolute`. Para respeitarem a posição de seu elemento pai (`flipper`), vamos definir sua posição como `relative`. Também vamos definir `front` e `back` com altura e largura como `100%`, para que eles fiquem com o tamanho total de seu container. ```css .flipper{ position: relative; ... } .front, .back{ position: absolute; width: 100%; height: 100%; } ``` ## Arrumando a Parte Visível Já temos os elementos da frente e de trás posicionados. Porém, o elemento que é declarado por último sempre fica por cima. Isso faz com que agora nós apenas possamos enxergar a imagem que foi colocada em `back`. Primeiro vamos girar `back` a 180 graus. Como ele inicialmente estará de costas para nós, vamos rotacioná-lo. ```css .back{ transform: rotateY(180deg); } ``` Agora teremos o `front` de frente para nós e o `back` de costas. Quando passarmos o mouse por cima, o `front` ficará de costas e o `back` de frente. Para finalizar este efeito, podemos simplesmente indicar ao CSS que não queremos que seja exibida a parte de trás dos elementos. Assim veremos apenas o elemento que estiver de frente para nós. Fazemos isso passando o valor `hidden` para a propriedade `backface-visibility`. ```css .front, .back{ position: absolute; width: 100%; height: 100%; backface-visibility: hidden; } ``` ## Efeito no Clique sem JavaScript Podemos fazer esse efeito de Flip Card ocorrer após um clique usando apenas CSS. Basta usarmos um `Checkbox` escondido para definir quando o elemento deverá girar. Primeiro adicione um `checkbox` antes de `flip-container`. ```html ``` E vamos mudar a regra que indica quando o elemento deverá girar. Usando `:checked` podemos indicar uma regra que ocorre quando um `checkbox` está marcado. Troque a regra em que colocamos o `.flip-container:hover` pela regra a seguir: ```css #switch:checked ~ .flip-container .flipper { transform: rotateY(180deg); } ``` Veja que com isso o nosso elemento irá girar quando clicarmos no `checkbox`. Podemos fazer o `checkbox` ser marcado ao clicar no nosso elemento. Basta usar o elemento `` e indicar o `id` do nosso `checkbox`. Assim os cliques feitos no `` são redirecionados ao `checkbox`. Então vamos trocar a div `flip-container` por um label: ```html ``` Veja que agora você pode marcar o `checkbox` simplesmente clicando na imagem. Para finalizar, basta esconder o `checkbox` com `display: none`. ```css #switch{ display: none; } ``` Você ainda pode mudar a direção da rotação, tendo os seguintes resultados: - [ #CSS ](https://www.treinaweb.com.br/blog/tag/css) - [ #Flip Cards ](https://www.treinaweb.com.br/blog/tag/flip-cards) - [ #como criar flip cards ](https://www.treinaweb.com.br/blog/tag/como-criar-flip-cards) - [ #CSS Transforms ](https://www.treinaweb.com.br/blog/tag/css-transforms) Autor ![Akira Hanashiro](//secure.gravatar.com/avatar/d107ca73135bc62770a67ebbfe4cf80d?d=mm) ## Akira Hanashiro Graduado em Análise e Desenvolvimento de Sistemas, Pós-graduado em Projetos e Desenvolvimento de Aplicações Web e MBA em Machine Learning. Especializado em Front End e curte desenvolvimento de jogos. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/06/GUIA-CSS-400x280.jpg) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 3 anos atrás ## [ Guia da linguagem CSS ](https://www.treinaweb.com.br/blog/guia-da-linguagem-css) Nesse guia completo veremos como funciona e quais as formas de criar estilizações com CSS, necessário para qualquer desenvolvedor front-end Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/07/04170829/css-slider-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 9 anos atrás ## [ Slideshow apenas com CSS ](https://www.treinaweb.com.br/blog/slideshow-apenas-com-css) Aprenda a criar um slideshow de maneira bem simples utilizando apenas CSS moderno. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/11/12071214/front-end-motion-graphics-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 7 anos atrás ## [ Começando com SVG no Front-End - Parte 3 - Animações com mo.js (Motion Graphics) ](https://www.treinaweb.com.br/blog/comecando-com-svg-no-front-end-parte-3-animacoes-com-mo-js-motion-graphics) Aprenda a criar animações incríveis e interativas de forma bem simples para a web utilizando o mo.js Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/float-css-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 10 anos atrás ## [ CSS: Float vs Inline Block - Qual usar em meus layouts? ](https://www.treinaweb.com.br/blog/css-float-vs-inline-block-qual-usar-em-meus-layouts) Você sabe quando utilizar "float" e "display: inline-block"? Veja as características de cada um e aprenda a aplicá-los em seus projetos. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/11/12071147/intro-svg-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 7 anos atrás ## [ Começando com SVG no Front-End - Parte 1 ](https://www.treinaweb.com.br/blog/comecando-com-svg-no-front-end-parte-1) Aprenda a começar a trabalhar com SVG para a criação de formas e efeitos no Front-End. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/01/introducao-ao-maven-aprenda-como-criar-e-gerenciar-projetos-java-400x280.png) [ Java ](https://www.treinaweb.com.br/blog/categoria/java) 6 anos atrás ## [ Introdução ao Maven, aprenda como criar e gerenciar projetos Java ](https://www.treinaweb.com.br/blog/introducao-ao-maven-aprenda-como-criar-e-gerenciar-projetos-java) Neste artigo veremos como instalar o Maven e como podemos utilizá-lo para nos auxiliar na criação e no gerenciamento de dependência de um projeto Java. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/01/07102001/CSS-Box-Model-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 7 anos atrás ## [ CSS - Definindo o cálculo de dimensões com box-sizing ](https://www.treinaweb.com.br/blog/css-definindo-o-calculo-de-dimensoes-com-box-sizing) Aprenda a definir como o CSS calcula as dimensões dos seus elementos e evite que seu layout quebre inesperadamente. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/01/07101943/Aspect-Ratio-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 7 anos atrás ## [ CSS - Altura automática proporcional à largura sem JavaScript ](https://www.treinaweb.com.br/blog/css-altura-automatica-proporcional-a-largura-sem-javascript) Aprenda a definir elementos com dimensões proporcionais com CSS sem nenhuma linha de JavaScript. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/04/01182054/0-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 8 anos atrás ## [ CSS Grid – Um Guia Interativo (Parte 1 – Containers) ](https://www.treinaweb.com.br/blog/css-grid-um-guia-interativo-parte-1-containers) Aprenda definitivamente a trabalhar com CSS Grid com este Guia Interativo para facilitar o seu trabalho na construção de layouts com CSS. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/01/03075048/Font-Awesome-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 7 anos atrás ## [ CSS: Dominando o Font Awesome ](https://www.treinaweb.com.br/blog/css-dominando-o-font-awesome) Aprenda como utilizar todo o potencial do Font Awesome para facilitar o uso de ícones em suas aplicações. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/grid-layout-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 10 anos atrás ## [ Começando com o novo CSS Grid Layout ](https://www.treinaweb.com.br/blog/comecando-com-o-novo-css-grid-layout) Aprenda um pouco mais sobre o CSS Grid Layout, agora com suporte completo pelo Firefox e Chrome. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/01/05103838/SIGNALR-400x280.png) [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 7 anos atrás ## [ Aplicações em tempo real com ASP.NET Core SignalR ](https://www.treinaweb.com.br/blog/aplicacoes-em-tempo-real-com-asp-net-core-signalr) Aprenda como criar uma streaming api utilizando a biblioteca de aplicações em templo real, SignalR. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **04h 34min 06s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58