Tomasz Makowski - rotating card

xxxxxxxxxx
 
<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 -->

xxxxxxxxxx
 
*
{
    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;}

xxxxxxxxxx
 
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();
    });
    
});

Console errors: 0