- Página Inicial
- Códigos CSS Prontos
- Flip card css Efeito Horizontal
- Voltar
Flip card css Efeito Horizontal
Neste tutorial vamos aprender a criar o Flip card css Efeito Horizontal com HTML e CSS puro.
Esse efeito nos permite fazer com que um elemento gire ao passarmos o mouse sobre ele.
Para girar uma elemento com CSS, podemos utilizar a propriedade transform (também inserida no CSS3) junto com seu valor rotate . Nossa animação deve começar com 0 graus de giro e finalizar com 360 graus, assim, a mesma irá dar um giro completo para o efeito Flip Card Css.
Nesta seção, projetaremos uma estrutura simples na tag <div>, <h1>, <h2>, <p> e o <href> para inserirmos um link de destino.
Essas são as tags que usaremos para criar o nosso Flip card
.
Vamos Adicionar o HTML
<div class="centraliza-card"> <div class="card-flip"> <div class="front" style="background-image: url('uploads/foto.jpg')"> <h1 class="text-shadow">Front-end</hi> </div> <div class="back"> <h2>Loop Nerd</h2> <p> A expressão Lorem ipsum em design gráfico e editoração é um texto padrão em latim utilizado na produção gráfica para... </p> <a href="https://www.loopnerd.com.br/" target="_blank">Leia mais</a> </div> </div> </div><!--Centraliza Card-->
Vamos Adicionar o CSS
Nesta seção, usaremos algumas propriedades CSS para estilizar o nosso
.Flip card
.centraliza-card { width: 100%; /*ou*/ align-items: center; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; } .card-flip { position: relative; } .card-flip > .front, .card-flip > .back { display: block; transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-duration: 0.5s; transition-property: transform, opacity; } .card-flip > .front { transform: rotateY(0deg); } .card-flip > .back { position: absolute; opacity: 0; top: 0px; left: 0px; width: 100%; height: 100%; transform: rotateY(-180deg); } .card-flip:hover > .front { transform: rotateY(180deg); } .card-flip:hover > .back { opacity: 1; transform: rotateY(0deg); } .card-flip { position: relative; display: inline-block; margin:10px; width:300px; } .card-flip img { width:100%; } .card-flip > .front, .card-flip > .back { display: block; color: #f8e800; width: 100%; background-size: cover !important; background-position: center !important; height: 200px; padding: 1em 2em; background: #57698b; border-radius: 10px; } .card-flip > .front p, .card-flip > .back p { font-size: 1em; line-height: 160%; color: #ffffff; } .card-flip > .back a { color:#000; text-decoration:underline; font-weight:bold; } .text-shadow { text-shadow: 2px 1px 5px #535353; }
Combinando as Duas seções acima com Html e Css temos o seguinte Resultado!
Veja o Resultado baixo!
Baixar Código Veja Funcionando
Publicado por: Loop Nerd
864 Visualizações
Deixe um comentário