<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();
This Pen doesn't use any external CSS resources.