<main>
  <h1>Ettrics</h1>
  <p>Google Now inspired info cards.</p>
  <p><a href="https://twitter.com/ettrics"><i class="fa fa-twitter"></i></a></p>
</main>
<ul>
  <li class="card">
    <div class="card__flipper">
      <div class="card__front">
        <p class="card__name"><span>Tony</span><br>Romo</p>
        <p class="card__num">9</p>
      </div>
      <div class="card__back">
        <svg height="180" width="180">
          <circle cx="90" cy="90" r="55" stroke="#514d9b" stroke-width="35"  />
        </svg>
        <span>113.2</span>
      </div>
    </div>
  </li>
  <li class="card">
    <div class="card__flipper">
       <div class="card__front">
         <p class="card__name"><span>Aaron</span><br>Rodgers</p>
        <p class="card__num">12</p>
      </div>
      <div class="card__back">
        <svg height="180" width="180">
          <circle cx="90" cy="90" r="55" stroke="#35a541" stroke-width="35"  />
        </svg>
        <span>112.2</span>
      </div>
    </div>
  </li>
  <li class="card">
    <div class="card__flipper">
       <div class="card__front">
        <p class="card__name"><span>Ben</span><br>Roethlisberger</p>
        <p class="card__num">7</p>
      </div>
      <div class="card__back">
        <svg height="180" width="180">
          <circle cx="90" cy="90" r="55" stroke="#bdb235" stroke-width="35"  />
        </svg>
        <span>103.3</span>
      </div>
    </div>
  </li>
  <li class="card">
    <div class="card__flipper">
       <div class="card__front">
        <p class="card__name"><span>Peyton</span><br>Manning</p>
        <p class="card__num">18</p>
      </div>
      <div class="card__back">
        <svg height="180" width="180">
          <circle cx="90" cy="90" r="55" stroke="#db6623" stroke-width="35"  />
        </svg>
        <span>101.5</span>
      </div>
    </div>
  </li>
  <li class="card">
    <div class="card__flipper">
       <div class="card__front">
        <p class="card__name"><span>Tom</span><br>Brady</p>
        <p class="card__num">12</p>
      </div>
      <div class="card__back">
        <svg height="180" width="180">
          <circle cx="90" cy="90" r="55" stroke="#3e5eb3" stroke-width="35"  />
        </svg>
        <span>97.4</span>
      </div>
    </div>
  </li>
  <li class="card">
    <div class="card__flipper">
       <div class="card__front">
        <p class="card__name"><span>Drew</span><br>Brees</p>
        <p class="card__num">9</p>
      </div>
      <div class="card__back">
        <svg height="180" width="180">
          <circle cx="90" cy="90" r="55" stroke="#aa9e5c" stroke-width="35"  />
        </svg>
        <span>97.0</span>
      </div>
    </div>
  </li>
</ul>
$color1: #5271C2;
$color2: #35a541;
$color3: #bdb235;
$color4: #db6623;
$color5: #3e5eb3;
$color6: #aa9e5c;

@function longshadow($color_a,$color_b,$stepnum, $opacity: 1){
	$gradient_steps: null;
	@for $i from 1 through $stepnum {
		$weight: ( ( $i - 1 ) / $stepnum ) * 100;
		$colour_mix: mix($color_b, rgba($color_a, $opacity), $weight);
		$seperator: null;
		@if($i != $stepnum){ 
			$seperator: #{','}; 
		}
		$gradient_steps: append( #{$gradient_steps}, #{$i}px #{$i}px $colour_mix $seperator );
 }
  @return $gradient_steps;
}

@mixin easeOut {
  transition: all .6s cubic-bezier(0.23, 1, 0.32, 1);
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column wrap;
  background: lighten(black, 12);
  color: white;
  font-family: 'Lato';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  padding: 15px;
  text-align: center;
  overflow-x: hidden;
}

.card {
  float: left;
  position: relative;
  width: calc(100% * .3333 - 30px + .3333 * 30px);
  height: 340px;
  margin: 0 30px 30px 0;
  perspective: 1000;
  
  &:first-child {
    .card__front {
      background: $color1;
    }
    .card__num {
      text-shadow: longshadow(darken($color1, 15%),$color1,100, 0.8);
    }
  }
  
  &:nth-child(2) {
     .card__front {
      background: $color2;
    }
    .card__num {
      text-shadow: longshadow(darken($color2, 15%),$color2,100, 0.8);
    }
  }
  
  &:nth-child(3) {
    margin-right: 0;
     .card__front {
      background: $color3;
    }
    .card__num {
      text-shadow: longshadow(darken($color3, 15%),$color3,100, 0.8);
    }
  }
  
  &:nth-child(4) {
     .card__front {
      background: $color4;
    }
    .card__num {
      text-shadow: longshadow(darken($color4, 15%),$color4,100, 0.8);
    }
  }
  
  &:nth-child(5) {
     .card__front {
      background: $color5;
    }
    .card__num {
      text-shadow: longshadow(darken($color5, 15%),$color5,100, 0.8);
    }
  }
  
  &:nth-child(6) {
     .card__front {
      background: $color6;
    }
    .card__num {
      text-shadow: longshadow(darken($color6, 15%),$color6,100, 0.8);
    }
  }
  
  &:last-child {
    margin-right: 0;
  }
  
  &__flipper {
    cursor: pointer;
    transform-style: preserve-3d;
    @include easeOut;
  }
  
  &__front,
  &__back {
    position: absolute;
    backface-visibility: hidden;
    top: 0;
    left: 0;
    width: 100%;
    height: 340px;
  }
  
  &__front {
    transform: rotateY(0);
    z-index: 2;
    overflow: hidden;
  }
  
  &__back {
    transform: rotateY(180deg) scale(1.1);
    background: lighten(black, 8);
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(black, 0.3);
    
    span {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
  
  &__name {
    font-size: 32px;
    line-height: 0.9;
    font-weight: 700;
    
    span {
      font-size: 14px;
    }
  }
  
  &__num {
    font-size: 100px;
    margin: 0 8px 0 0;
    font-weight: 700;
    
    @media (max-width: 700px) {
      font-size: 70px;
    }
  }
  
  @media (max-width: 700px) {
    width: 100%;
    height: 290px;
    margin-right: 0;
    float: none;
    
    .card__front,
    .card__back {
      height: 290px;
    }
  }
}

/* Demo */
main {
  text-align: center;
  
  h1, p {
    margin: 0 0 12px 0;
  }

  h1 {
    margin-top: 12px;
    font-weight: 300;
  }
}

.fa-twitter {
  color: white;
  font-size: 30px;
}
View Compiled
var Flipper = (function() {
  var card = $('.card');
  var flipper = card.find('.card__flipper');
  var win = $(window);
  
  var flip = function() {
    var thisCard = $(this);
    var thisFlipper = thisCard.find('.card__flipper');
    var offset = thisCard.offset();
    var xc = win.width() / 2;
    var yc = win.height() / 2;
    var docScroll = $(document).scrollTop();
    var cardW = thisCard.outerWidth() / 2;
    var cardH = thisCard.height() / 2;

    var transX = xc - offset.left - cardW;
    var transY = docScroll + yc - offset.top - cardH;
//     if (offset.top > card.height()) transY = docScroll - offset.top + cardH;
    if (win.width() <= 700) transY = 0;
    
    if (card.hasClass('active')) unflip();
        
    thisCard.css({'z-index': '3'}).addClass('active');
    
    thisFlipper.css({
      'transform': 'translate3d(' + transX + 'px,' + transY + 'px, 0) rotateY(180deg) scale(1)',
      '-webkit-transform': 'translate3d(' + transX + 'px,' + transY + 'px, 0) rotateY(180deg) scale(1)',
      '-ms-transform': 'translate3d(' + transX + 'px,' + transY + 'px, 0) rotateY(180deg) scale(1)'
    }).addClass('active');
    
    return false;
  };
  
  var unflip = function(e) {
    card.css({'z-index': '1'}).removeClass('active');
    flipper.css({
      'transform': 'none',
      '-webkit-transform': 'none',
      '-ms-transform': 'none'
    }).removeClass('active');
  };
  
  var bindActions = function() {
    card.on('click', flip);
    win.on('click', unflip);
  }
  
  var init = function() {
    bindActions();
  };
  
  return {
    init: init
  };
  
}());

Flipper.init();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js