How to Create Flip Card with HTML CSS and jQuery

Uncategorized / Leave a Comment

It is easy to create a vertical rotate Flip Card with HTML CSS and jQuery. The flip card is used for telling or showcasing your business. Whereby everybody will know about your business and your contact details.

HTML

<div class="flip-card">
    <div class="full-detail">
        <h2>Full Details</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet temporibus minus nam, sed quaerat odio iste ipsa autem suscipit, magnam mollitia iusto enim praesentium possimus modi tenetur neque, molestiae ratione <a href="#">View More</a></p>
    </div>
    <div class="detail">
        <div class="client-photo">
            <img src="https://www.markuptag.com/images/user-icon.jpg" alt="client">
        </div>
        <div class="client-name">
            <h3>Owner Name</h3>
            <span>CEO & Founder</span>
        </div>
    </div>
</div>

CSS

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background-color: #00BCD4;
    font-family: arial;
}
.flip-card{
    width: 500px;
    height: 280px;
    margin: 40px auto;
    position: relative;
    cursor: pointer;
}
.full-detail, .detail {
    height: 100%;
    backface-visibility: hidden;
    transition: transform 0.5s linear;
    border-radius: 5px;
    position: absolute;
    width: 100%;
    background: #fff;
}
.full-detail {
    padding: 30px;
    transform: perspective(600px) rotateX(180deg);
}
.full-detail p {
    font-size: 18px;
    line-height: 26px;
    margin: 15px 0px 10px;
}
.full-detail p a {
    color: #03bcd4;
    text-decoration: none;
    letter-spacing: 2px;
    float: right;
    margin-top: 50px;
}
.card-rotate .full-detail{
    transform: perspective(600px) rotateX(0deg);
}
.card-rotate .detail{
    transform: perspective(600px) rotateX(-180deg);
}
.detail {
    padding: 55px;
}
.client-photo {
    width: 170px;
    height: 170px;
    border-radius: 100%;
    margin-right: 25px;
    overflow: hidden;
    border: 1px solid #ddd;
    float: left;
    padding: 7px;
}
.client-photo img {
    width: 100%;
}
.client-name h3 {
    font-size: 20px;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: #03bcd4;
    margin: 50px 0px 10px;
}

JavaScript

$(".flip-card").click(function(){
    $(this).toggleClass("card-rotate");
});

Must Read