Card Flip

card-flip.markdown

Card Flip

A simple card flip effect using Anime.js

A Pen by Marcos Paulo on CodePen.

License.

index.html

<div class="card-container">
  <div class="card">
    <div class="front">
      A
    </div>
    <div class="back">
      B
    </div>
  </div>
</div>

script.js

var card = document.querySelector(".card");
var playing = false;

card.addEventListener('click',function() {
  if(playing)
    return;
  
  playing = true;
  anime({
    targets: card,
    scale: [{value: 1}, {value: 1.4}, {value: 1, delay: 250}],
    rotateY: {value: '+=180', delay: 200},
    easing: 'easeInOutSine',
    duration: 400,
    complete: function(anim){
       playing = false;
    }
  });
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script>

style.css

body
{
    background: #cfd8dc;
}

.card-container
{
    font-family: 'Open Sans', sans serif;
    font-size: 120px;
    font-weight: bold;

    width: 400px;
    height: 250px;
    margin: 80px auto;

    border-radius: 10px;

    perspective: 1400px;
}

.card
{
    position: relative;

    height: 100%;

    border-radius: 10px;

    widht: 100%;
    transform-style: preserve-3d;
}

.front,
.back
{
    display: flex;

    width: 100%;
    height: 100%;

    border-radius: 10px;

    justify-content: center;
    align-items: center;
    backface-visibility: hidden;
}

.front
{
    color: #fff;
    background: #2196f3;
}

.back
{
    position: absolute;
    top: 0;
    left: 0;

    transform: rotateY(180deg);

    color: #2196f3;
    background: #fff;
}