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