<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ---------->
<!DOCTYPE html>
<html>
<head>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Arima+Madurai:100,200,300,400,500,700,800,900" rel="stylesheet">
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div>
<div class="card-container">
<div class="card">
<div class="front">
<div class="cover">
<img src="https://www.clipartsgram.com/image/129556292-kyz84k3.jpg"/>
</div>
<div class="user">
<img class="img-circle" src="https://www2.mmu.ac.uk/media/mmuacuk/style-assets/images/r-research/profile-Zeyad.jpg"/>
</div>
<div class="content">
<div class="main">
<h3 class="name">John Marvel</h3>
<p class="profession">CEO</p>
<p class="text-center">"I'm the new Sinatra, and since I made it here I can make it anywhere, yeah, they love me everywhere"</p>
</div>
<div class="footer">
<i class="fa fa-mail-forward"></i> Auto Rotation
</div>
</div>
</div> <!-- end front panel -->
<div class="back">
<div class="header">
<h5 class="motto">"To be or not to be, this is my awesome motto!"</h5>
</div>
<div class="content">
<div class="main">
<h4 class="text-center">Job Description</h4>
<p class="text-center">Web design, Adobe Photoshop, HTML5, CSS3, Corel and many others...</p>
<div class="stats-container">
<div class="stats">
<h4>235</h4>
<p>
Followers
</p>
</div>
<div class="stats">
<h4>114</h4>
<p>
Following
</p>
</div>
<div class="stats">
<h4>35</h4>
<p>
Projects
</p>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="social-links text-center">
<a href="http://deepak646.blogspot.in/" class="facebook"><i class="fa fa-facebook fa-fw"></i></a>
<a href="http://deepak646.blogspot.in/" class="google"><i class="fa fa-google-plus fa-fw"></i></a>
<a href="http://deepak646.blogspot.in/" class="twitter"><i class="fa fa-twitter fa-fw"></i></a>
</div>
</div>
</div> <!-- end back panel -->
</div> <!-- end card -->
</div> <!-- end card-container -->
</div> <!-- end col sm 3 -->
<!-- <div class="col-sm-1"></div> -->
<div class="">
<div class="card-container manual-flip">
<div class="card">
<div class="front">
<div class="cover">
<img src="https://www.clipartsgram.com/image/124089475-california-beaches-tumblr-wallpaper-3.jpg"/>
</div>
<div class="user">
<img class="img-circle" src="http://www.outbrain.com/risingstars/wp-content/uploads/708x708-RS-Profile-Ashley-Callahan-400x400.jpg"/>
</div>
<div class="content">
<div class="main">
<h3 class="name">Andrew Mike</h3>
<p class="profession">Web Developer</p>
<p class="text-center">"Lamborghini Mercy <br>Your chick she so thirsty <br>I'm in that two seat Lambo"</p>
</div>
<div class="footer">
<button class="btn btn-simple" onclick="rotateCard(this)">
<i class="fa fa-mail-forward"></i> Manual Rotation
</button>
</div>
</div>
</div> <!-- end front panel -->
<div class="back">
<div class="header">
<h5 class="motto">"To be or not to be, this is my awesome motto!"</h5>
</div>
<div class="content">
<div class="main">
<h4 class="text-center">Job Description</h4>
<p class="text-center">Web design, Adobe Photoshop, HTML5, CSS3, Corel and many others...</p>
<div class="stats-container">
<div class="stats">
<h4>235</h4>
<p>
Followers
</p>
</div>
<div class="stats">
<h4>114</h4>
<p>
Following
</p>
</div>
<div class="stats">
<h4>35</h4>
<p>
Projects
</p>
</div>
</div>
</div>
</div>
<div class="footer">
<button class="btn btn-simple" rel="tooltip" title="Flip Card" onclick="rotateCard(this)">
<i class="fa fa-reply"></i> Back
</button>
<div class="social-links text-center">
<a href="http://deepak646.blogspot.in/" class="facebook"><i class="fa fa-facebook fa-fw"></i></a>
<a href="http://deepak646.blogspot.in/" class="google"><i class="fa fa-google-plus fa-fw"></i></a>
<a href="http://deepak646.blogspot.in/" class="twitter"><i class="fa fa-twitter fa-fw"></i></a>
</div>
</div>
</div> <!-- end back panel -->
</div> <!-- end card -->
</div> <!-- end card-container -->
</div> <!-- end col sm 3 -->
<!-- <div class="col-sm-1"></div> -->
<div class="">
<div class="card-container">
<div class="card">
<div class="front">
<div class="cover">
<img src="http://www.hdimageson.com/wp-content/uploads/2016/05/beach-images-tumblr-300x188.jpg"/>
</div>
<div class="user">
<img class="img-circle" src="https://1.bp.blogspot.com/-aruLLVlXyJM/V_t-TxTncZI/AAAAAAAAJ3k/hnQKKVmKuOY_awf1nHGTsukGfw4qrde-gCLcB/s400/2.jpg"/>
</div>
<div class="content">
<div class="main">
<h3 class="name">Inna Corman</h3>
<p class="profession">Product Manager</p>
<p class="text-center">"I'm the new Sinatra, and since I made it here I can make it anywhere, yeah, they love me everywhere"</p>
</div>
<div class="footer">
<div class="rating">
<i class="fa fa-mail-forward"></i> Auto Rotation
</div>
</div>
</div>
</div> <!-- end front panel -->
<div class="back">
<div class="header">
<h5 class="motto">"To be or not to be, this is my awesome motto!"</h5>
</div>
<div class="content">
<div class="main">
<h4 class="text-center">Job Description</h4>
<p class="text-center">Web design, Adobe Photoshop, HTML5, CSS3, Corel and many others...</p>
<div class="stats-container">
<div class="stats">
<h4>235</h4>
<p>
Followers
</p>
</div>
<div class="stats">
<h4>114</h4>
<p>
Following
</p>
</div>
<div class="stats">
<h4>35</h4>
<p>
Projects
</p>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="social-links text-center">
<a href="http://deepak646.blogspot.in/" class="facebook"><i class="fa fa-facebook fa-fw"></i></a>
<a href="http://deepak646.blogspot.in/" class="google"><i class="fa fa-google-plus fa-fw"></i></a>
<a href="http://deepak646.blogspot.in/" class="twitter"><i class="fa fa-twitter fa-fw"></i></a>
</div>
</div>
</div> <!-- end back panel -->
</div> <!-- end card -->
</div> <!-- end card-container -->
</div> <!-- end col-sm-3 -->
</div> <!-- end col-sm-10 -->
</div> <!-- end row -->
<div class="space-200"></div>
</div>
</body>
</html>
@import url('https://fonts.googleapis.com/css?family=Arima+Madurai:100,200,300,400,500,700,800,900');
body {
margin-top: 60px;
font-size: 14px;
font-family: 'Arima Madurai', cursive;
background-color: #E5E9ED;
}
.btn:hover,
.btn:focus,
.btn:active{
outline: 0 !important;
}
/* entire container, keeps perspective */
.card-container {
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
margin-bottom: 30px;
}
/* flip the pane when hovered */
.card-container:not(.manual-flip):hover .card,
.card-container.hover.manual-flip .card{
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}
.card-container.static:hover .card,
.card-container.static.hover .card {
-webkit-transform: none;
-moz-transform: none;
-o-transform: none;
transform: none;
}
/* flip speed goes here */
.card {
-webkit-transition: -webkit-transform .5s;
-moz-transition: -moz-transform .5s;
-o-transition: -o-transform .5s;
transition: transform .5s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
background-color: #FFF;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.14);
}
/* front pane, placed above back */
.front {
z-index: 2;
}
/* back, initially hidden pane */
.back {
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
z-index: 3;
}
.back .btn-simple{
position: absolute;
left: 0;
bottom: 4px;
}
/* Style */
.card{
background: none repeat scroll 0 0 #FFFFFF;
border-radius: 4px;
color: #444444;
}
.card-container, .front, .back {
width: 100%;
height: 420px;
border-radius: 4px;
-webkit-box-shadow: 0px 0px 19px 0px rgba(0,0,0,0.16);
-moz-box-shadow: 0px 0px 19px 0px rgba(0,0,0,0.16);
box-shadow: 0px 0px 19px 0px rgba(0,0,0,0.16);
}
.card .cover{
height: 105px;
overflow: hidden;
border-radius: 4px 4px 0 0;
}
.card .cover img{
width: 100%;
}
.card .user{
border-radius: 50%;
display: block;
height: 120px;
margin: -55px auto 0;
overflow: hidden;
width: 120px;
}
.card .user img{
background: none repeat scroll 0 0 #FFFFFF;
border: 4px solid #FFFFFF;
width: 100%;
}
.card .content{
background-color: rgba(0, 0, 0, 0);
box-shadow: none;
padding: 10px 20px 20px;
}
.card .content .main {
min-height: 160px;
}
.card .back .content .main {
height: 215px;
}
.card .name {
font-family: 'Arima Madurai', cursive;
font-size: 22px;
line-height: 28px;
margin: 10px 0 0;
text-align: center;
text-transform: capitalize;
}
.card h5{
margin: 5px 0;
font-weight: 400;
line-height: 20px;
}
.card .profession{
color: #999999;
text-align: center;
margin-bottom: 20px;
}
.card .footer {
border-top: 1px solid #EEEEEE;
color: #999999;
margin: 30px 0 0;
padding: 10px 0 0;
text-align: center;
}
.card .footer .social-links{
font-size: 18px;
}
.card .footer .social-links a{
margin: 0 7px;
}
.card .footer .btn-simple{
margin-top: -6px;
}
.card .header {
padding: 15px 20px;
height: 90px;
}
.card .motto{
font-family: 'Arima Madurai', cursive;
border-bottom: 1px solid #EEEEEE;
color: #999999;
font-size: 14px;
font-weight: 400;
padding-bottom: 10px;
text-align: center;
}
.card .stats-container{
width: 100%;
margin-top: 50px;
}
.card .stats{
display: block;
float: left;
width: 33.333333%;
text-align: center;
}
.card .stats:first-child{
border-right: 1px solid #EEEEEE;
}
.card .stats:last-child{
border-left: 1px solid #EEEEEE;
}
.card .stats h4{
font-family: 'Arima Madurai', cursive;
font-weight: 300;
margin-bottom: 5px;
}
.card .stats p{
color: #777777;
}
/* Just for presentation */
.title{
color: #506A85;
text-align: center;
font-weight: 300;
font-size: 44px;
margin-bottom: 90px;
line-height: 90%;
}
.title small{
font-size: 17px;
color: #999;
text-transform: uppercase;
margin: 0;
}
.space-30{
height: 30px;
display: block;
}
.space-50{
height: 50px;
display: block;
}
.space-200{
height: 200px;
display: block;
}
.white-board{
background-color: #FFFFFF;
min-height: 200px;
padding: 60px 60px 20px;
}
.ct-heart{
color: #F74933;
}
pre.prettyprint{
background-color: #ffffff;
border: 1px solid #999;
margin-top: 20px;
padding: 20px;
text-align: left;
}
.atv, .str{
color: #05AE0E;
}
.tag, .pln, .kwd{
color: #3472F7;
}
.atn{
color: #2C93FF;
}
.pln{
color: #333;
}
.com{
color: #999;
}
.btn-simple{
opacity: .8;
color: #666666;
background-color: transparent;
}
.btn-simple:hover,
.btn-simple:focus{
background-color: transparent;
box-shadow: none;
opacity: 1;
}
.btn-simple i{
font-size: 16px;
}
.navbar-brand-logo{
padding: 0;
}
.navbar-brand-logo .logo{
border: 1px solid #333333;
border-radius: 50%;
float: left;
overflow: hidden;
width: 60px;
}
.navbar .navbar-brand-logo .brand{
color: #FFFFFF;
float: left;
font-size: 18px;
font-weight: 400;
line-height: 20px;
margin-left: 10px;
margin-top: 10px;
width: 60px;
}
.navbar-default .navbar-brand-logo .brand{
color: #555;
}
/* Fix bug for IE */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.front, .back{
-ms-backface-visibility: visible;
backface-visibility: visible;
}
.back {
visibility: hidden;
-ms-transition: all 0.2s cubic-bezier(.92,.01,.83,.67);
}
.front{
z-index: 4;
}
.card-container:not(.manual-flip):hover .back,
.card-container.manual-flip.hover .back{
z-index: 5;
visibility: visible;
}
}
<script>
$().ready(function(){
$('[rel="tooltip"]').tooltip();
});
function rotateCard(btn){
var $card = $(btn).closest('.card-container');
console.log($card);
if($card.hasClass('hover')){
$card.removeClass('hover');
} else {
$card.addClass('hover');
}
}
</script>
