Card Flip Animation Using CSS

byCodingFlicks -September 12, 2020

0

CSS Card Flip Animation is a visually appealing and interactive web design technique where a CSS card rotates along its axis. This rotation can be horizontal or vertical. This animation will reveal information on its opposite side. We can use CSS or JavaScript to achieve this effect. In this snippet, we have used only HTML and CSS to achieve this animation. In this Blog Post, we will share a snippet based on how we can create a simple card flip animation using CSS. This project is also about the card, but we have shown a CSS animation of each card box's flipping effect when we hover over it. The video tutorial below shows how to create the entire snippet.

Video Tutorial:

We hope you have watched the video tutorial above. In this Flipping Profile Card CSS animation, what will happen is that when a user places the cursor on the image, the image will flip and rotate 180 degrees horizontally. When the flip animation is finished, we will see the information about that image on the back of the card. We can use this project when we design testimonials or employee details for a particular website design.

In this simple card flip animation project using CSS, we used Bootstrap CSS and Font-Awesome icons along with HTML and CSS. We showed in the video tutorial above how to integrate CDN libraries into the project. In the HTML markup, we took a div element with the class name 'box-area' and it will act as the container for the card. Then we used the Bootstrap container and row classes to give it some predefined margin padding from the framework. Inside the row class, we took three Bootstrap column grids. Inside each column grid, we took another div element called 'single-box' and provided all the information about that image in a div called 'front' and a separate box called 'back'.

In the CSS part, we have taken 'Lato' as the primary font for the snippet. We have provided custom padding from top and bottom for the card container class 'box-area'. We have given a custom 350px width and 350px height for each 'single-box' div element. After applying some basic styling to all the elements in the front and back, we have used CSS transform and backface-visibility CSS properties to create a CSS animation effect on hover.

You May Also Like:

Card Flip Animation Using CSS [ Source Code ]:

To create this snippet, you need to create two files. One is an HTML file and the other is a CSS file. Then copy the HTML and CSS code from the code box below, paste it into the appropriate file, and save it. You can download the source code from the download button at the bottom of this blog post.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!-- codingflicks.com -->	
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Card Flip Animation Using CSS</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <div class="box-area">
		<div class="container">
			<div class="row">
				<div class="col-md-4">
					<div class="single-box">
						<div class="box-content">
							<div class="front"><img alt="" src="img/1.jpg"></div>
							<div class="back">
								<h1>person one</h1>
								<p>Her Designation</p>
								<p class="socials">
                                    <i class="fa fa-facebook"></i>
                                    <i class="fa fa-twitter"></i> 
                                    <i class="fa fa-dribbble"></i> 
                                    <i class="fa fa-pinterest"></i>
                                </p>
							</div>
						</div>
					</div>
				</div>
				<div class="col-md-4">
					<div class="single-box">
						<div class="box-content">
							<div class="front"><img alt="Avatar" src="img/2.jpg"></div>
							<div class="back">
								<h1>person two</h1>
								<p>Her Designation</p>
								<p class="socials">
                                    <i class="fa fa-facebook"></i> 
                                    <i class="fa fa-twitter"></i> 
                                    <i class="fa fa-dribbble"></i> 
                                    <i class="fa fa-pinterest"></i>
                                </p>
							</div>
						</div>
					</div>
				</div>
				<div class="col-md-4">
					<div class="single-box">
						<div class="box-content">
							<div class="front"><img alt="" src="img/3.jpg"></div>
							<div class="back">
								<h1>person three</h1>
								<p>Her Designation</p>
								<p class="socials">
                                    <i class="fa fa-facebook"></i> 
                                    <i class="fa fa-twitter"></i> 
                                    <i class="fa fa-dribbble"></i> 
                                    <i class="fa fa-pinterest"></i>
                                </p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>


</body>
</html>

ADD CSS:

body {
	font-family: lato;
    background: #2290ff;
}
.box-area {
	padding: 100px 0;
}
.single-box {
	background-color: transparent;
	width: 350px;
	height: 350px;
	perspective: 1000px;
}
.box-content {
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
	transition: transform 0.6s;
	transform-style: preserve-3d;
	box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.5);
}
.single-box:hover .box-content {
	transform: rotateY(180deg);
}
.front, .back {
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.front img {
	width: 100%;
}
.back {
	background-color: #fff;
	color: #262626;
	padding-top: 90px;
	transform: rotateY(180deg);
}
.back h1 {
	text-transform: uppercase;
	font-weight: bold;
	font-size: 30px;
}
.back p {
	font-size: 18px;
}
.socials {
	margin-top: 30px;
}
.socials i {
	padding: 0 5px;
}

Card flip animation with CSS animation can significantly improve the interactivity and user engagement of a website. It always creates curiosity in the user about what is behind the card or an image. It helps developers to create engaging and memorable websites. For improved usability, visual appeal and professional aesthetics of a website, CSS card flip animation is a very essential element of web design. We hope you have collected the source code. For more, click the Load More button on our homepage. Thanks for watching.

DOWNLOAD CODE

Please do not enter any spam link in the comment box.