<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="cards-wrapper">
<div class="card-wrapper">
<div class="card-1 card-object card-object-hf"><a class="face front" href="#">
<div class="title-wrapper">
<div class="title">Jenny</div>
<div class="subtitle">felis hairyus</div>
</div></a><a class="face back" href="#">
<div class="img-wrapper">
<div class="avatar"></div>
</div>
<div class="info-wrapper">
<div class="info-title">Jenny</div>
<ul class="info-content">
<li class="info-content-item">Age <span>6 years</span></li>
<li class="info-content-item">Length <span>46cm</span></li>
<li class="info-content-item">Weight <span>4kg</span></li>
</ul>
</div></a></div>
</div>
<div class="card-wrapper">
<div class="card-2 card-object card-object-hf"><a class="face front" href="#">
<div class="title-wrapper">
<div class="title">Mishka</div>
<div class="subtitle">felis catus</div>
</div></a><a class="face back" href="#">
<div class="img-wrapper">
<div class="avatar"></div>
</div>
<div class="info-wrapper">
<div class="info-title">Mishka</div>
<ul class="info-content">
<li class="info-content-item">Age <span>7 years</span></li>
<li class="info-content-item">Length <span>42cm</span></li>
<li class="info-content-item">Weight <span>3.8kg</span></li>
</ul>
</div></a></div>
</div>
<div class="card-wrapper">
<div class="card-3 card-object card-object-hf"><a class="face front" href="#">
<div class="title-wrapper">
<div class="title">Kyra</div>
<div class="subtitle">felix pumus</div>
</div></a><a class="face back" href="#">
<div class="img-wrapper">
<div class="avatar"></div>
</div>
<div class="info-wrapper">
<div class="info-title">Kyra</div>
<ul class="info-content">
<li class="info-content-item">Age <span>5 years</span></li>
<li class="info-content-item">Length <span>50cm</span></li>
<li class="info-content-item">Weight <span>5.2kg</span></li>
</ul>
</div></a></div>
</div>
</div>
<script>
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
.filter('.flip-in')
.removeClass('flip-in')
.addClass('flip-out');
}
function openCard($card) {
$card
.removeClass('flip-out')
.addClass('flip-in');
}
</script>
@import url('https://fonts.googleapis.com/css?family=Archivo+Black');
body {
font: "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: #cfcfcf;
background: -webkit-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: 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: #FFF;
}
html,
body {
height: 100%;
}
.cards-wrapper {
position: relative;
height: 100%;
list-style: none;
margin: 0;
padding: 0 5%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.card-wrapper {
display: block;
float: left;
position: relative;
margin: 0;
width: 28%;
height: 0;
padding: 0 0 28%;
-webkit-perspective: 700px;
perspective: 700px;
}
.card-object {
color: #FFF;
display: block;
float: left;
position: absolute;
top: 6%;
left: 6%;
width: 88%;
height: 88%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.card-object.card-1 .front {
background: #222 url(http://s7.qtrpages.info/storage/app/media/2.jpg) 90% 35%;
background-size: 115%;
}
.card-object.card-1 .back .img-wrapper {
background: transparent url(http://s7.qtrpages.info/storage/app/media/2.jpg) 70% 45%;
background-size: 160%;
}
.card-object.card-1 .back .avatar {
background: transparent url(http://s7.qtrpages.info/storage/app/media/2.jpg) 40% 20%;
background-size: 130% 130%;
}
.card-object.card-2 .front {
background: #222 url(http://s7.qtrpages.info/storage/app/media/2.jpg) 50% 90% no-repeat;
background-size: 105%;
}
.card-object.card-2 .back .img-wrapper {
background: transparent url(http://s7.qtrpages.info/storage/app/media/2.jpg) 70% 50%;
background-size: 140%;
}
.card-object.card-2 .back .avatar {
background: transparent url(http://s7.qtrpages.info/storage/app/media/2.jpg) 50% 50% no-repeat;
background-size: 140% 140%;
}
.card-object.card-3 .front {
background: #222 url(http://s7.qtrpages.info/storage/app/media/2.jpg) 80% 100% no-repeat;
background-size: 108%;
}
.card-object.card-3 .back .img-wrapper {
background: transparent url(http://s7.qtrpages.info/storage/app/media/2.jpg) 90% 40% no-repeat;
background-size: 115%;
}
.card-object.card-3 .back .avatar {
background: #fff url(http://s7.qtrpages.info/storage/app/media/2.jpg) 0 50% no-repeat;
background-size: 120% 120%;
}
.card-object.flip-in.card-1,
.card-object.flip-in.card-3 {
-webkit-animation: flip-in-hor-1 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
animation: flip-in-hor-1 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
}
.card-object.flip-in.card-2 {
-webkit-animation: flip-in-hor-2 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
animation: flip-in-hor-2 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
}
.card-object.flip-out.card-1,
.card-object.flip-out.card-3 {
-webkit-animation: flip-out-hor-1 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
animation: flip-out-hor-1 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
}
.card-object.flip-out.card-2 {
-webkit-animation: flip-out-hor-2 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
animation: flip-out-hor-2 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
}
.card-object-hf .back {
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.face {
color: #fff;
text-decoration: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.face.front {
z-index: 20;
background-repeat: no-repeat;
background-position: 50% 50%;
}
.face.front::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "";
background: -webkit-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;
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: .8;
z-index: 20;
-webkit-transition: opacity .2s ease;
transition: opacity .2s ease;
}
.face.front::after {
position: absolute;
top: 7%;
right: 7%;
bottom: 7%;
left: 7%;
border: 1px solid rgba(255, 255, 255, 0.35);
z-index: 100;
content: "";
}
.face.front .title-wrapper {
position: absolute;
bottom: 3%;
left: 25%;
right: 25%;
overflow: hidden;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
z-index: 100;
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transition: -webkit-transform .28s ease;
transition: -webkit-transform .28s ease;
transition: transform .28s ease;
transition: transform .28s ease, -webkit-transform .28s ease;
}
.face.front .title-wrapper .title {
position: relative;
font-family: 'Archivo Black', sans-serif;
width: 100%;
text-transform: uppercase;
font-size: 2vw;
line-height: 1;
opacity: .8;
-webkit-transition: opacity .2s ease;
transition: opacity .2s ease;
}
.face.front .title-wrapper .title::after {
display: block;
margin: 7% auto 8% auto;
width: 100%;
height: 1px;
content: "";
background-color: #fff;
opacity: .5;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transition: -webkit-transform .15s;
transition: -webkit-transform .15s;
transition: transform .15s;
transition: transform .15s, -webkit-transform .15s;
}
.face.front .title-wrapper .subtitle {
font-size: .9vw;
line-height: 1;
letter-spacing: 1px;
text-transform: uppercase;
opacity: 0;
-webkit-transition: opacity .15s;
transition: opacity .15s;
}
.face.front:hover::before {
opacity: .9;
}
.face.front:hover .title-wrapper {
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.face.front:hover .title-wrapper .title {
opacity: 1;
}
.face.front:hover .title-wrapper .title::after {
-webkit-transform: scale(1);
transform: scale(1);
opacity: .5;
-webkit-transition-delay: .15s;
transition-delay: .15s;
-webkit-transition-duration: .2s;
transition-duration: .2s;
}
.face.front:hover .title-wrapper .subtitle {
opacity: .7;
-webkit-transition-delay: .2s;
transition-delay: .2s;
-webkit-transition-duration: .2s;
transition-duration: .2s;
}
.face.back {
color: #222;
background: #fff;
z-index: 10;
}
.info-container {
position: absolute;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
top: 6%;
right: 6%;
bottom: 6%;
left: 6%;
padding: 0;
}
.img-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 38%;
z-index: 10;
}
.img-wrapper::after {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(14, 6, 70, 0.6);
opacity: .7;
}
.avatar {
position: absolute;
left: 50%;
height: 68%;
width: 25.84%;
display: block;
border-radius: 50%;
margin-top: 25.08%;
margin-left: -12.92%;
background-color: #fff;
border: 3px solid #FFF;
z-index: 20;
}
.info-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
position: absolute;
top: 50.92%;
left: 0;
right: 0;
bottom: 0;
padding: 4% 15% 15%;
}
.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: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
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;
}
.info-content-item span {
display: block;
font-weight: bold;
font-size: 1.1vw;
margin-top: 7px;
text-transform: none;
color: #222;
}
/**
* ----------------------------------------
* ANIMATIONS
* ----------------------------------------
*/
@-webkit-keyframes flip-in-hor-1 {
0% {
-webkit-transform: translateY(0) translateZ(0) rotateX(0);
transform: translateY(0) translateZ(0) rotateX(0);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
100% {
-webkit-transform: translateY(-100%) translateZ(100px) rotateX(-180deg);
transform: translateY(-100%) translateZ(100px) rotateX(-180deg);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
}
@keyframes flip-in-hor-1 {
0% {
-webkit-transform: translateY(0) translateZ(0) rotateX(0);
transform: translateY(0) translateZ(0) rotateX(0);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
100% {
-webkit-transform: translateY(-100%) translateZ(100px) rotateX(-180deg);
transform: translateY(-100%) translateZ(100px) rotateX(-180deg);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
}
@-webkit-keyframes flip-out-hor-1 {
0% {
-webkit-transform: translateY(-100%) translateZ(100px) rotateX(-180deg);
transform: translateY(-100%) translateZ(100px) rotateX(-180deg);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
100% {
-webkit-transform: translateY(0) translateZ(0) rotateX(0);
transform: translateY(0) translateZ(0) rotateX(0);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
}
@keyframes flip-out-hor-1 {
0% {
-webkit-transform: translateY(-100%) translateZ(100px) rotateX(-180deg);
transform: translateY(-100%) translateZ(100px) rotateX(-180deg);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
100% {
-webkit-transform: translateY(0) translateZ(0) rotateX(0);
transform: translateY(0) translateZ(0) rotateX(0);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
}
@-webkit-keyframes flip-in-hor-2 {
0% {
-webkit-transform: translateY(0) translateZ(0) rotateX(0);
transform: translateY(0) translateZ(0) rotateX(0);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
100% {
-webkit-transform: translateY(100%) translateZ(100px) rotateX(180deg);
transform: translateY(100%) translateZ(100px) rotateX(180deg);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
}
@keyframes flip-in-hor-2 {
0% {
-webkit-transform: translateY(0) translateZ(0) rotateX(0);
transform: translateY(0) translateZ(0) rotateX(0);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
100% {
-webkit-transform: translateY(100%) translateZ(100px) rotateX(180deg);
transform: translateY(100%) translateZ(100px) rotateX(180deg);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
}
@-webkit-keyframes flip-out-hor-2 {
0% {
-webkit-transform: translateY(100%) translateZ(100px) rotateX(180deg);
transform: translateY(100%) translateZ(100px) rotateX(180deg);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
100% {
-webkit-transform: translateY(0) translateZ(0) rotateX(0);
transform: translateY(0) translateZ(0) rotateX(0);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
}
@keyframes flip-out-hor-2 {
0% {
-webkit-transform: translateY(100%) translateZ(100px) rotateX(180deg);
transform: translateY(100%) translateZ(100px) rotateX(180deg);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
100% {
-webkit-transform: translateY(0) translateZ(0) rotateX(0);
transform: translateY(0) translateZ(0) rotateX(0);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
}
