Card Flip Css

Card Flip Css

Hoje veremos como criar o efeito de Flip Cards com Html e CSS puro. Esse efeito nos permite fazer com que um elemento gire quando passamos o mouse sobre ele.

Definição

rotacionarY()

A função CSS define uma transformação que gira um elemento em torno da ordenada (eixo vertical) sem deformá-lo. Seu resultado é um tipo de dados. rotateY()

Exemplo na pratica:

transform: rotateY(0);

transform: rotateY(45deg);

transform: rotateY(-0.2turn);

transform: rotateY(3.142rad);

O eixo de rotação passa por uma origem, definida pela transform-origin propriedade CSS.

Nota: rotateY(a) é equivalente a rotate3d(0, 1, 0, a).

Ao contrário das rotações no plano 2D, a composição das rotações 3D geralmente não é comutativa. Em outras palavras, a ordem em que as rotações são aplicadas impacta o resultado.

Sintaxe

A quantidade de rotação criada por rotateY()é especificada por um <angle>. Se positivo, o movimento será no sentido horário; se for negativo, será no sentido anti-horário.

rotateY(a)

valores

a

É uma <angle> representação do ângulo de rotação. Um ângulo positivo denota uma rotação no sentido horário, um ângulo negativo no sentido anti-horário.

Como fazer um flip card CSS?

Nesta seção, projetaremos uma estrutura simples na tag  <div>,  <p>, <button>, e a <a> para inserir o link de destino. 

Usaremos as classes (.box-card, .card, .frente, .verso e a class .button) para dar o formato e estilizar com css.

Essas é a tags e classes que usaremos para criar o nosso Card Flip com html Css.

Vamos Adicionar o HTML

    <div class="box-card">

        <a href="https://pt.wikipedia.org/wiki/Urso-negro" target="_blank" class="card">

            <div class="frente" style="background-image: url(uploads/urso.jpg)">
            
                <p>O urso-negro, também conhecido como baribal</p>
            
            </div><!--Frente-->

            <div class="verso">
       
                <div>
                
                    <p>O urso-negro, também conhecido como baribal, é um urso norte-americano, encontrado do Alasca ao Norte do México.</p>
                    <p>Alcança 2,20 m de comprimento, 1,10 m de altura na cernelha e 360 kg de peso.</p>

                    <button class="button">Veja mais...</button>
                
                </div>
       
            </div><!--Verso-->

        </a><!--Card 1-->

        <a href="https://pt.wikipedia.org/wiki/Urso-negro" target="_blank" class="card">

            <div class="frente" style="background-image: url(uploads/urso.jpg)">
            
                <p>O urso-negro, também conhecido como baribal</p>
            
            </div><!--Frente-->

            <div class="verso">
       
                <div>
                
                    <p>O urso-negro, também conhecido como baribal, é um urso norte-americano, encontrado do Alasca ao Norte do México.</p>
                    <p>Alcança 2,20 m de comprimento, 1,10 m de altura na cernelha e 360 kg de peso.</p>

                    <button class="button">Veja mais...</button>
                
                </div>
       
            </div><!--Verso-->

        </a><!--Card 2-->

      
    </div><!--Box Card-->

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para estilizar o  nosso Card Flip com html e css.

.box-card {

  display: flex;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  max-width: 1200px;

}

.card {

  color: inherit;
  cursor: pointer;
  width: calc(33% - 2rem);
  min-width: calc(33% - 2rem);
  height: 400px;
  min-height: 400px;
  perspective: 1000px;
  margin: 1rem;
  position: relative;

}

@media screen and (max-width: 768px) {

    .card { width: calc(50% - 2rem); }

}

@media screen and (max-width: 500px) {
  
   .card { width: 100%; }

}

.frente,.verso {

  display: flex;
  border-radius: 6px;
  background-position: center;
  background-size: cover;
  text-align: center;
  justify-content: center;
  align-items: center;
  position: absolute;
  height: 100%;
  width: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transition: ease-in-out 600ms;

}

.frente {

  background-size: cover;
  padding: 2rem;
  font-size: 1.618rem;
  font-weight: 600;
  color: #fff;
  overflow: hidden;
  font-family: Poppins, sans-serif;

}

.frente:before {

  position: absolute;
  display: block;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #1a9be6, #1a57e6);
  opacity: 0.25;
  z-index: -1;
}

.card:hover .frente {
  transform: rotateY(180deg);
}

.card:nth-child(even):hover .frente {
  transform: rotateY(-180deg);
}

.verso {
  background: #0455b7;
  transform: rotateY(-180deg);
  padding: 0 2em;
}

.verso p { 

    width:100%; 
    float:left; 
    margin-bottom:20px; 
    color:#fff; 

}

.verso .button {

  background: linear-gradient(135deg, #c0c0c0, #fff);

}

.verso .button:before {
  box-shadow: 0 0 10px 10px rgba(26, 87, 230, 0.25);
  background-color: rgba(26, 87, 230, 0.25);
}

.card:hover .verso {
  transform: rotateY(0deg);
}


.button {

    transform: translateZ(40px);
    cursor: pointer;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    font-weight: bold;
    color: #525252;
    padding: 0.6em 1.5em;
    border-radius: 100px;
    font: bolder;
    border: none;
    position: relative;
    transform-style: preserve-3d;
    transition: 300ms ease;
    font-size: 1em;

}

.button:before {

  transition: 300ms ease;
  position: absolute;
  display: block;
  content: "";
  transform: translateZ(-40px);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  height: calc(100% - 20px);
  width: calc(100% - 20px);
  border-radius: 100px;
  left: 10px;
  top: 16px;

}

.button:hover {
  transform: translateZ(55px);
}

.button:hover:before {
  transform: translateZ(-55px);
}

.button:active {
  transform: translateZ(20px);
}

.button:active:before {
  transform: translateZ(-20px);
  top: 12px;
}

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

Veja o Resultado baixo!

Baixar Código Veja Funcionando