Flip card css Efeito Vertical

Flip card css Efeito Vertical

Neste tutorial vamos aprender a criar o Flip card css Efeito Vertical 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 no EIXO (X) (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.

Veja um pequeno exemplo:

.card-flip{
  transform: rotateX(0deg);
}

//ou seja gira em 180 graus quando passamos o mouse sobre o elemento html
 .card-flip:hover{
  transform: rotateX(180deg);
}

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">Html</hi>
            </div>
            
            <div class="back">
               <h2>Html</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 class="card-flip">
            
            <div class="front" style="background-image: url('uploads/foto.jpg')">
                <h1 class="text-shadow">CSS</hi>
            </div>
            
            <div class="back">
               <h2>Css</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.

/*CARD Vertical*/

.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: rotateX(0deg);
}

.card-flip > .back {
  position: absolute;
  opacity: 0;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  transform: rotateX(-180deg);
}

.card-flip:hover > .front {
  transform: rotateX(180deg);
}

.card-flip:hover > .back {
  opacity: 1;
  transform: rotateX(0deg);
}

.card-flip {
  position: relative;
  display: inline-block;
  margin:10px;
  max-width:300px;
  width:100%;

}

.card-flip img { width:100%; }

.card-flip > .front,
.card-flip > .back {
  display: block;
  color: #0a75ff;
  width: 100%;
  background-size: cover !important;
  background-position: center !important;
  height: 220px;
  padding: 1em 2em;
  background: #050505;
  border-radius: 10px;
}

.card-flip > .front p,
.card-flip > .back p {
  font-size: 1em;
  line-height: 160%;
  color: #ffffff;
  margin-bottom: 5px;
}

.card-flip > .back a { color:#0a75ff; text-decoration:underline; font-weight:bold; }

.text-shadow {

    text-shadow: 2px 1px 5px #535353;

}

/*CARD Vertical*/

Combinando as Duas seções acima com Html e Css  temos o seguinte Resultado!

Veja o Resultado baixo!

Baixar Código Veja Funcionando