Profile Card with flip animation

Hello Friends. Today, in this blog, we will learn how to create profile cards with a flip animation effect. To understand the project better, you need to watch the video tutorial below from beginning to end. On our YouTube channel, we have shared videos on the front end. If you are interested in frontend development then subscribe to our channel.

I hope you watched the whole card flip animation video once and understood how the project was made. In this project, we have made a profile card that has some information on the front and back. On the front side is an image, image-related information, social media link, and a learn more button. Clicking on the Learn More button will flip the card, and the information at the back will open in front of us. On the Backside of the profile card, we will see the name and designation and a bar chart of skills. There is a cross button on the top right side of the back card. If you click on that cross sign, the card will flip over and return to its previous state.

First, we will take two divs called front and back inside a div called 'wrapper'. On the front div, we will take a div called 'img-area' for the image. Then we will add the name and designation. To add a social media profile, we will add a span tag inside a P tag and add a font-awesome icon to it. Finally, we will add a button so that when we click on that, we get the flip animation. We will create the cross button at the beginning of the back card. Then we will take a div called 'container' and create the person's name, designation, and four skill bar charts in it.

You must have seen in the video how all the elements of the card are styled. This project uses the JavaScript library JQuery. In CSS, a class called 'animated' has been created so that clicking on the animate class button in the 'box' div triggers the 'animated' class. It is not possible to describe everything in detail in this blog. So please watch the video tutorial above and then collect the source code.

You May Also Like:

Profile Card flip Animation [ Source Code ]:

To create this project you have o create two files. One is the HTML file with the.html extension and the other is the CSS file with the .css extension. Please add the latest jquery and font-awesome CDN as well. After that copy the code below and paste them into your project. If you have any problems with the code below then download the source code from the Download button.

ADD HTML

<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
    <meta charset="UTF-8">
    <title>How to create Profile Card With Flip Animation Effect</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
		<div class="box">
			<div class="front">
                <div class="img-area">
                    <img src="https://images.pexels.com/photos/899954/pexels-photo-899954.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
                </div>
            
			    <h2>Julia Thorn</h2>
			    <h5>Web Designer</h5>
			     <p class="socials">
			         <span><i class="fa fa-facebook"></i></span>			         
			         <span><i class="fa fa-instagram"></i></span>
			         <span><i class="fa fa-twitter"></i></span>
			         <span><i class="fa fa-pinterest"></i></span>
			     </p>
				<a class="btn animate" href="#">Learn More</a>
			</div>
			<div class="back">
				<a class="animate close" href="#">×</a>
				
				<div class="container">
				    <div class="text-area">
				        <h2>Julia Thorn</h2>
				        <h5>Web Designer</h5>
				        <div class="skill-area">
				            <p>HTML</p>
                            <div class="single-skill">
                              <div class="skills one">95%</div>
                            </div>

                            <p>CSS</p>
                            <div class="single-skill">
                              <div class="skills two">85%</div>
                            </div>

                            <p>JavaScript</p>
                            <div class="single-skill">
                              <div class="skills three">75%</div>
                            </div>

                            <p>PHP</p>
                            <div class="single-skill">
                              <div class="skills four">90%</div>
                            </div>
				        </div>
				    </div>
				</div>
			</div>
		</div>
	</div>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
	<script>
	$(document).ready(function(){
	 $('.animate').click(function(){
	   $('.box').toggleClass('animated');
	   return false;
	 });
	});
	</script>
</body>
</html>

ADD CSS:

body {
	background-color: #e4e8f0;
	font-family: 'Montserrat', sans-serif;
}
a {
	text-transform: uppercase;
	font-weight: bold;
}
.wrapper {
	height: 500px;
	margin: 8% auto 0;
	width: 350px;
	position: relative;
	perspective: 800px;
}
.wrapper .box {
	position: absolute;
	transition: transform 0.5s;
	transform-style: preserve-3d;
	height: 100%;
	width: 100%;
}
.wrapper .box .front, .wrapper .box .back {
	display: block;
	margin: 0;
	height: 100%;
	width: 100%;
	position: absolute;
	backface-visibility: hidden;
}
.wrapper .box .front {
	background-color: #323650;
	box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}
.front h2 {
	font-size: 27px;
	text-align: center;
	margin-top: 10%;
	color: #fff;
	text-transform: uppercase;
}
.front h5 {
	font-size: 15px;
	text-align: center;
	margin: 0 0 30px 0;
	text-transform: uppercase;
	color: #fff;
}
.wrapper .box .back {
	background-color: #fff;
	transform: rotateY(180deg);
}
.wrapper .btn {
	margin-top: 25px;
}
.wrapper .box.animated {
	transform: rotateY(-180deg);
}
.wrapper .close {
	display: block;
	font-size: 40px;
	position: absolute;
	top: 15px;
	right: 3%;
	text-decoration: none;
	color: #fff;
}
.btn {
	color: #fff;
	display: block;
	font-size: 15px;
	margin: 0 auto;
	max-width: 250px;
	padding: 15px 0;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	background: linear-gradient(to right, #e53935, #e35d5b);
	border-radius: 50px;
}
.container {
	background-color: #323650;
	padding: 60px;
	height: 380px;
	text-align: center;
	color: #fff
}
.img-area {
	width: 120px;
	height: 120px;
	overflow: hidden;
	margin: 8% auto 0;
	border-radius: 50%;
	border: 10px solid #fff;
}
.img-area img {
	width: 100%;
}
.socials {
	width: 85%;
	text-align: center;
	margin: auto;
	line-height: 1.5;
	font-size: 20px;
}
.socials span {
	background: #fff;
	width: 50px;
	height: 50px;
	display: inline-block;
	border-radius: 50%;
	line-height: 50px;
}
.text-area h2 {
	margin: 0;
	text-transform: uppercase;
}
.skill-area {
	width: 100%;
}
.skill-area p {
	font-weight: 700;
	text-align: left;
}
.single-skill {
	background: #262626;
}
.skills {
	text-align: right;
	color: white;
	background: linear-gradient(to right, #e53935, #e35d5b);
	font-weight: 700;
}
.one {
	width: 90%;
}
.two {
	width: 85%;
}
.three {
	width: 75%;
}
.four {
	width: 90%;
}

I hope you have implemented the code correctly. We regularly share front-end related source code on our blog. So visit our blog regularly. Share our blog articles with like-minded people. Learn for yourself and help others learn. Thanks for visiting our blog.

DOWNLOAD CODE

Profile Card flip Animation [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Profile Card with flip animation

Profile Card flip Animation [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form