<h1 class="center-text" style="margin: 50px 0 100px 0;">Rotating card</h1>
</hr>
<!--Exemple card-->
<div class="maincontainer">
<div class="thecard">
<div class="flip">
<!--Front card-->
<div class="thefront">
<div class="my-gradient radius-front"></div>
<div class="avatar-container">
<img class="avatar" src="https://i.ibb.co/Kxspx5s/img9Edit.jpg">
</div>
<h4 class="name">CEO</h4>
<p class="stars center-text m-0">
<i class="fas fa-star amber-text"> </i>
<i class="fas fa-star amber-text"> </i>
<i class="fas fa-star amber-text"> </i>
<i class="fas fa-star amber-text"> </i>
<i class="fas fa-star amber-text"> </i>
</p>
<p class="textarea center-text">Header of this Corp. </p>
</div>
<!--Front card-->
<!--Back card-->
<div class="theback">
<div class="my-gradient radius-back"></div>
<h4 class="name">Title</h4>
<p class="textarea">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et </p>
<a class="btn waves-effect waves-light btn-red center-absolute">More</a>
<!--Social media buttons-->
<ul class="list-unstyled list-inline text-center card-links">
<li class="list-inline-item m-0">
<a class="btn-floating btn-fb mx-1 waves-effect waves-light card-link">
<i class="fab fa-facebook-f fa-1x"> </i>
</a>
</li>
<li class="list-inline-item m-0">
<a class="btn-floating btn-tw mx-1 waves-effect waves-light card-link">
<i class="fab fa-twitter"> </i>
</a>
</li>
<li class="list-inline-item m-0">
<a class="btn-floating btn-gplus mx-1 waves-effect waves-light card-link">
<i class="fab fa-google-plus-g"> </i>
</a>
</li>
<li class="list-inline-item m-0">
<a class="btn-floating btn-li mx-1 waves-effect waves-light card-link">
<i class="fab fa-linkedin-in"> </i>
</a>
</li>
</ul>
<!--/Social media buttons-->
</div>
<!--/Back card-->
</div>
<div class="top waves-effect waves-light">
<h3>John Wick</h3>
</div>
</div>
</div>
<!-- ./Exemple card -->
*
{
padding: 0;
margin: 0;
}
body
{
background-color: rgb(255, 255, 255);
/*cursor: none;*/
color: rgb(0, 0, 0);
}
.center-text{text-align: center;}
.center-margin{margin: 0 auto;}
.center-absolute{
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.maincontainer
{
margin: 0 auto;
position: relative;
width: 250px;
height: auto;
}
.thecard
{
width: 100%;
height: auto;
transform-style: preserve-3d;
}
.flip
{
width: 100%;
height: 350px;
transform-style: preserve-3d;
transition: all 0.4s ease;
}
.thecard:hover .theback
{
box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.43);
}
.thefront
{
width: 100%;
height: 350px;
backface-visibility: hidden;
background: #ffffff;
color: rgb(0, 0, 0);
border-radius:20px 0 20px 0;
transition: all 0.4s ease;
box-shadow: 0px 1px 10px -2px rgba(0,0,0,0.43);
overflow: hidden;
}
.theback
{
width: 100%;
height: 350px;
backface-visibility: hidden;
background: #ffffff;
color: rgb(0, 0, 0);
transition: all 0.4s ease;
border-radius:0 20px 0 20px ;
box-shadow: 0px 1px 10px -2px rgba(0,0,0,0.43);
transform: translateY(-100%) rotateY(180deg);
overflow: hidden;
}
.textarea
{
width: 90%;
margin: 10px auto;
}
.top
{
position: absolute;
top: 0;
text-align: center;
background-color: #d32f2f;
justify-items: center;
vertical-align: middle;
width: 100%;
margin: 0 auto;
border-radius: 0 20px 0 20px;
transform: translateY(-25px);
color: #fff;
transition: 0.4s all;
box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.43);
}
.top > h3
{
font-size: 30px;
padding: 5px 0;
}
.avatar-container
{
width: 170px;
margin: 40px auto 5px auto;
}
.avatar
{
max-width: 170px;
border-radius: 50%;
left: 50%;
box-shadow: 0px 1px 10px -2px rgba(0,0,0,0.43);
}
.name
{
text-align: center;
font-size: 20px;
padding: 5px 0;
}
.theback > a
{
bottom: 60px;
}
.card-link
{
position: relative;
margin: 0;
width: 30px;
height: 30px;
}
.card-link > *
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.card-links
{
width: 100%;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.my-gradient
{
content: '';
position: absolute;
bottom: 0;
width: 100%;
height: 20%;
display: inline-block;
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 46, 46, 0.1)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 46, 46, 0.1) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 46, 46, 0.1) 100%);
/* Opera 11.10+ */
/* IE10+ */
background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0))), to(rgba(255, 46, 46, 0.1)));
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 46, 46, 0.1) 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002f4b', endColorstr='#00000000', GradientType=0);
/* IE6-9 */
}
.radius-front{border-radius:0 0 20px 0;}
.radius-back{border-radius:0 0 0 20px;}
function flip(){
clearTimeout(backVar);
$(".top").css({
"box-shadow": "0px 1px 10px -2px rgba(0,0,0,0.43)",
"transform": "translateY(-100%)"
});
flipVar = setTimeout( function(){
$(".flip").css({
"transform": "rotateY(180deg)"
});
$(".radius-front").hide();
}, 400);
}
function back(){
clearTimeout(flipVar);
$(".radius-front").show();
backVar = setTimeout( function(){
$(".top").css({
"box-shadow": "0px 10px 20px 0px rgba(0,0,0,0.43)",
"transform": "translateY(-25px)"
});
}, 400);
$(".flip").css({
"transform": "none"
});
}
var flipVar, backVar;
$(function(){
$(".thecard").hover(function(){
flip();
}, function(){
back();
});
});