Pure CSS Card Flip Animation

Today we will share with you a simple but beautiful snippet about 3D flip card animation. This animation can be accomplished via an on-click event or hover. We have decided to do this animation on hover. The flip card effect animation is when we hover over a card, its back part rotates and comes in front of us. The card will come back to its previous state when we lift the hover. This animation is more common in websites nowadays, especially e-commerce websites. Before collecting the source code, please watch the video tutorial below. This will allow you to understand the snippets and modify them yourself. There are a lot of videos on our YouTube channel with such examples of animation. If you think these videos will be helpful for you, then you should subscribe to our channel.

If you haven't watched the whole video yet, I hope you will. An image has been taken on the front of the card and the information of that person is on the back of the card. This type of card can be used to design the team section or profile section of the website. It is possible to use it to create product cards if you are designing an e-commerce site.

To create this card, we used the display flex property to bring the website parent div 'wrapper' to the center of the viewport. The height and width of the card are specified, and the parent div wrapper is provided with a perspective value of 900px. A smooth CSS transition and transform-style values are issued to the card. The rotateY value is 180 degrees when the card has hovered over. You can see how the elements of the front and back parts of the card have been styled in the above video.

You May also like:

Pure CSS Card Flip Animation [ Source Code ]:

After creating the project folder, you have to create two files. The external CSS file needs to be linked to the HTML file. Take the code from the code box below and paste it into your files. You can save and open it in the browser to see if it works. If it doesn't work, you can download the code from the below button.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
    <meta charset="UTF-8">
    <title>CSS Card Flipping Animation on hover</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="single-card">
        <div class="front"></div>
        <div class="back">
            <div class="content">
                <h2>Mark Jones</h2>
                <h4>Web Developer</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut molestias quaerat consectetur. Voluptas sed, aliquam reiciendis odio, labore quod itaque.</p>
                <p class="socials">
                 <i class="fa fa-youtube"></i> 
                 <i class="fa fa-instagram"></i> 
                 <i class="fa fa-vimeo"></i> 
                 <i class="fa fa-dribbble"></i>
                </p>
            </div>
        </div>
    </div>
</div>

</body>
</html>

ADD CSS:

body {
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: poppins;
	background: blueviolet;
}
.wrapper, .single-card {
	height: 450px;
	max-width: 300px;
	margin: 0 auto;
	position: relative;
}
.wrapper {
	perspective: 900px;
}
.single-card {
	text-align: center;
	transition: all 1.5s cubic-bezier(0.7, -0.5, 0.3, 1.8);
	transform-style: preserve-3d;
}
.wrapper:hover .single-card {
	transform: rotateY(180deg);
}
.front, .back {
	width: 300px;
	position: relative;
	top: 0;
	left: 0;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.front {
	cursor: pointer;
	height: 100%;
	background-image: url(1.jpg);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	border-radius: 50px;
	background-size: cover;
	background-position: center center;
}
.back {
	transform: rotateY(180deg);
	position: absolute;
	border-radius: 50px;
	height: 450px;
	background: #fff;
}
.content {
	padding-top: 25%;
}
.content h2 {
	font-size: 35px;
	margin: 0;
	font-weight: 300;
}
.content h4 {
	margin: 0;
}
.socials {
	margin-top: 20%;
}
.socials i {
	font-size: 30px;
	margin: 0 10px;
}

There are a lot of projects on the website that you can explore by clicking on the Load More button. You can find the piece of information you're looking for by scrolling. We appreciate your visit to our website.

DOWNLOAD CODE

Pure CSS Card Flip Animation [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Pure CSS Card Flip Animation

Pure CSS Card Flip Animation [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form