.cards-wrapper
  
  .card-wrapper
    .card-1.card-object.card-object-hf
      a.face.front(href="#")
        .title-wrapper
          .title Jenny
          .subtitle felis hairyus
      a.face.back(href="#")
        .img-wrapper
          .avatar
        .info-wrapper
          .info-title Jenny
          ul.info-content
            li.info-content-item Age #[span 6 years]
            li.info-content-item Length #[span 46cm]
            li.info-content-item Weight #[span 4kg]
      
  .card-wrapper
    .card-2.card-object.card-object-hf
      a.face.front(href="#")
        .title-wrapper
          .title Mishka
          .subtitle felis catus
      a.face.back(href="#")
        .img-wrapper
          .avatar
        .info-wrapper
          .info-title Mishka
          ul.info-content
            li.info-content-item Age #[span 7 years]
            li.info-content-item Length #[span 42cm]
            li.info-content-item Weight #[span 3.8kg]
  
  .card-wrapper
    .card-3.card-object.card-object-hf
      a.face.front(href="#")
        .title-wrapper
          .title Kyra
          .subtitle felix pumus
      a.face.back(href="#")
        .img-wrapper
          .avatar
        .info-wrapper
          .info-title Kyra
          ul.info-content
            li.info-content-item Age #[span 5 years]
            li.info-content-item Length #[span 50cm]
            li.info-content-item Weight #[span 5.2kg]

.info Powered by #[a(href="http://animista.net/play/basic/flip-2/flip-2-hor-top-fwd" target="_blank") flip-2-hor-top-fwd] and #[a(href="http://animista.net/play/basic/flip-2/flip-2-hor-bottom-fwd" target="_blank") flip-2-hor-bottom-fwd] animations from #[a(href="http://animista.net/play" target="_blank") Animista.net]
View Compiled
@import url('https://fonts.googleapis.com/css?family=Archivo+Black');

body {
  font: "Helvetica Neue", Helvetica, Arial, sans-serif; 
  background-color: #cfcfcf;
  background: linear-gradient(45deg, rgba(22, 167, 175, 0.6) 5%, rgba(23, 27, 158, 0.7) 55%, rgba(68, 9, 82, 0.5) 100%) no-repeat;
  background-size: 200%;
  color: #222;
}

html,
body {
  height: 100%;
}

.cards-wrapper {
  position: relative;
  height: 100%;
  list-style: none;
  margin: 0;
  padding: 0 5%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-wrapper {
  display: block;
  float: left;
  position: relative;
  margin: 0;
  width: 28%;
  height: 0;
  padding: 0 0 28%;
  perspective: 700px;
}

.card-object {
  @size: 88%;
  color: #FFF;
  display: block;
  float: left;
  position: absolute;
  top: (100% - @size)/2;
  left: (100% - @size)/2;
  width: @size;
  height: @size;
  transform-style: preserve-3d;
  
  &.card-1 {
    .front {
      background: #222 url(https://www.dropbox.com/s/8cc22nblu4y4vzi/jenny.jpeg?raw=1) 90% 35%;
      background-size: 115%;
    }
    
    .back {
      .img-wrapper {
        background: transparent url(https://www.dropbox.com/s/8cc22nblu4y4vzi/jenny.jpeg?raw=1) 70% 45%;
      background-size: 160%;
      }
      
      .avatar {
        background: transparent url(https://www.dropbox.com/s/8cc22nblu4y4vzi/jenny.jpeg?raw=1) 40% 20%;
      background-size: 130% 130%;
      }
    }
  }
  
  &.card-2 {
    .front {
      background: #222 url(https://www.dropbox.com/s/8l8snk9wcyxbo24/miska.jpeg?raw=1) 50% 90% no-repeat;
      background-size: 105%;
    }
    
    .back {
      .img-wrapper {
        background: transparent url(https://www.dropbox.com/s/8l8snk9wcyxbo24/miska.jpeg?raw=1) 70% 50%;
      background-size: 140%;
      }
      
      .avatar {
        background: transparent url(https://www.dropbox.com/s/8l8snk9wcyxbo24/miska.jpeg?raw=1) 50% 50% no-repeat;
      background-size: 140% 140%;
      }
    }
  }
  
  &.card-3 {
    .front {
      background: #222 url(https://www.dropbox.com/s/l9knvp7vgci3p9c/kira.jpg?raw=1) 80% 100% no-repeat;
      background-size: 108%;
    }
    
    .back {
      .img-wrapper {
        background: transparent url(https://www.dropbox.com/s/l9knvp7vgci3p9c/kira.jpg?raw=1) 90% 40% no-repeat;
      background-size: 115%;
      }
      
      .avatar {
        background: #fff url(https://www.dropbox.com/s/l9knvp7vgci3p9c/kira.jpg?raw=1) 0 50% no-repeat;
      background-size: 120% 120%;
      }
    }
  }
  
  //flip-in animations
  &.flip-in {
    
    &.card-1,
    &.card-3 {
      // animation: flip-in-hor-1 0.8s cubic-bezier(0.680, -0.550, 0.265, 1.550) both;
      animation: flip-2-hor-top-fwd 0.8s cubic-bezier(0.680, -0.550, 0.265, 1.550) both;
    }
    
    &.card-2 {
      animation: flip-2-hor-bottom-fwd 0.8s cubic-bezier(0.680, -0.550, 0.265, 1.550) both;
    }
  }
  
  //flip-out animations
  &.flip-out {
    
    &.card-1,
    &.card-3 {
      // animation: flip-out-hor-1 0.8s cubic-bezier(0.680, -0.550, 0.265, 1.550) both;
      animation: flip-2-hor-top-fwd 0.8s cubic-bezier(0.680, -0.550, 0.265, 1.550) reverse both;
    }
    
    &.card-2 {
      animation: flip-2-hor-bottom-fwd 0.8s cubic-bezier(0.680, -0.550, 0.265, 1.550) reverse both;
    }
  }
}

.card-object-hf {
  .back {
    transform: rotateX(180deg);
  }
}

.face {
  color: #fff;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-wrap: wrap;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;

  &.front {
    z-index: 20;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    
     &::before {
      position: absolute;
      top: -1px;
      right: -1px;
      bottom: -1px;
      left: -1px;
      content: "";
       background: linear-gradient(45deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0.1) 100%) no-repeat;
       opacity: .7;
       z-index: 20;
       transition: opacity .2s ease;
    }
    
    &::after {
      @padd: 7%;
      position: absolute;
      top: @padd;
      right: @padd;
      bottom: @padd;
      left: @padd;
      border: 1px solid rgba(255, 255, 255, 0.35);
      z-index: 100;
      content: "";
    }
    
    .title-wrapper {
      position: absolute;
      bottom: 3%;
      left:  25%;
      right: 25%;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      flex-wrap: wrap;
      z-index: 100;
      transform: translateY(0);
      transition: transform .28s ease;
    
      .title {
        position: relative;
        font-family: 'Archivo Black', sans-serif;
        width: 100%;
        text-transform: uppercase;
        font-size: 2vw;
        line-height: 1;
        opacity: .8;
        transition: opacity .2s ease;

        &::after {
          display: block;
          margin: 7% auto 8% auto;
          width: 100%;
          height: 1px;
          content: "";
          background-color: #fff;
          opacity: .5;
          // opacity: 0;
          transform: scale(0);
          transition: transform .15s;
        }
      }

      .subtitle {
        font-size: .9vw;
        line-height: 1;
        letter-spacing: 1px;
        text-transform: uppercase;
        opacity: 0;
        transition: opacity .15s;
      }
    }
    
    &:hover {
      
      &::before {
        opacity: .9;
      }
      
      .title-wrapper {
        transform: translateY(-50%);
        
        .title {
          opacity: 1;
          
          &::after {
            transform: scale(1);
            opacity: .5;
            transition-delay: .15s;
            transition-duration: .2s;
          }
        }
        
        .subtitle {
          opacity: .7;
          transition-delay: .2s;
          transition-duration: .2s;
        }
      }
    }
  }

  &.back {
    color: #222;
    background: #fff;
    z-index: 10;
  }
}

.info-container {
  @borderPadding: 6%;
  
  position: absolute;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: flex-start;
  top: @borderPadding;
  right: @borderPadding;
  bottom: @borderPadding;
  left: @borderPadding;
  padding: 0;
}

  @imgWrapperH: 38%;
  @imgWrapperPadd: 32%;
  @imgH: 100% - @imgWrapperPadd;
  @imgW: @imgWrapperH - (@imgWrapperH * (@imgWrapperPadd/100));
  @imgMarginT: @imgWrapperH;
.img-wrapper {
  
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: @imgWrapperH;
  z-index: 10;
  
  &::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(14, 6, 70, 0.6);
    // background: linear-gradient(45deg, rgba(217,89,229,0.7) 0%,rgba(41,203,209,0.8) 48%,rgba(41,203,209,0.8) 53%,rgba(17,40,89,0.9) 100%);
    opacity: .7;
  }
}

.avatar {
  position: absolute;
  left: 50%;
  height: @imgH;
  width: @imgW;
  display: block;
  border-radius: 50%;
  margin-top: @imgWrapperH - (@imgW/2);
  margin-left: -(@imgW/2);
  background-color: #fff;
  border: 3px solid #FFF;
  z-index: 20;
}

.info-wrapper {
  @padding: 15%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  position: absolute;
  top: @imgWrapperH + @imgW/2;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 4% @padding @padding;
}

.info-title {
  font-size: 1.5vw;
  font-family: 'Archivo Black', sans-serif;
  text-align: left;
  padding: 0;
  margin: 0;
  text-align: center;
  display: block;
  width: 100%;
}

.info-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 8% 0 0;
  margin: 8% 0 0;
  border-top: 1px solid #e0e0e0;
}

.info-content-item {
  color: #222;
  font-size: .75vw;
  line-height: 1;
  text-align: center;
  display: inline-block;
  padding: 0;
  margin: 0;
  text-transform: uppercase;
  color: #aaa;
  
  span {
    display: block;
    font-weight: bold;    
    font-size: 1.1vw;
    margin-top: 7px;
    text-transform: none;
    color: #222;
  }
}

.info {
  position: absolute;
  bottom: 30px;
  left: 5%;
  right: 5%;
  font-size: 1em;
  text-align: center;
  
  a {
    color: #8c0f8c;
    text-decoration: none;
    
    &:hover {
      text-decoration: underline;
    }
  }
}

/* ----------------------------------------------
 * Generated by Animista on 2017-21-5 2:48:23
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation flip-2-hor-top-fwd
 * ----------------------------------------
 */
@keyframes flip-2-hor-top-fwd {
  0% {
    transform: translateY(0) translateZ(0) rotateX(0);
    transform-origin: 50% 0%;
  }
  100% {
    transform: translateY(-100%) translateZ(100px) rotateX(-180deg);
    transform-origin: 50% 100%;
  }
}

/**
 * ----------------------------------------
 * animation flip-2-hor-bottom-fwd
 * ----------------------------------------
 */
@keyframes flip-2-hor-bottom-fwd {
  0% {
    transform: translateY(0) translateZ(0) rotateX(0);
    transform-origin: 50% 100%;
  }
  100% {
    transform: translateY(100%) translateZ(100px) rotateX(180deg);
    transform-origin: 50% 0%;
  }
}
View Compiled
var $cards = $('.card-object'),
    $faceButtons = $('.face');

$faceButtons.on('click', flipCard);

function flipCard(event) {
  event.preventDefault();
  
  var $btnFace = $(this),
      $card = $btnFace.parent('.card-object');
  
  if( $card.hasClass('flip-in') ) {
    closeCards();
  } else {
    closeCards();
    openCard($card);
  }
  
}

function closeCards() {
  $cards.each( function() {
    $(this)
      .filter('.flip-in')
      .removeClass('flip-in')
      .queue( function() {
        // Force reflow hack
        var reflow = this.offsetHeight;
        $(this)
          .addClass('flip-out')
          .dequeue();
      })
      
  });
}

function openCard($card) {
  $card
    .removeClass('flip-out')
    .queue( function() {
      // Force reflow hack
      var reflow = this.offsetHeight;
      $(this)
        .addClass('flip-in')
        .dequeue();
    });
    
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js