3D Card Flip CSS Animation

byCodingFlicks -December 21, 2023

0

The web design landscape is constantly evolving. Hence the addition of captivating animations has become an important element in creating user experience. One of these impressive animations is the 3D card flip CSS animation. Today in this blog post we will create a flipping card animation using HTML CSS which can be used in various e-commerce websites, company websites, design portfolios, and study guides on educational platform-related websites. The video tutorial below shows how to create this flip card animation. Hope you will get the idea by watching the whole video tutorial. Subscribe to our channel if you like our content.

Video Tutorial:

We Hope you have watched the video tutorial on CSS Flipping card animation. Let's briefly discuss CSS animations before we get into this card-flipping animation. One powerful tool that developers can use to improve a website's visual attractiveness is CSS animation. Additionally, it aids in the development of dynamic and captivating user interfaces. These days, static websites with a lot of text don't perform well. These days, every website is dynamic, engaging, and visually stimulating. An essential part of this progression has been played by CSS animation. With the vast array of creative expression tools that CSS provides, developers may unleash their creativity and produce stunning animations.

The use of 3D card flip CSS animations adds a different dimension to add depth and interactivity to any website or web app. Card flip animation's illusion of depth and movement attracts users and encourages them to interact with the website element. These CSS flipping cards can be used to reveal additional information or content in a visually appealing way. Overall, web designers and developers can greatly improve their websites' visual appeal, user engagement, and storytelling potential by utilizing 3D card flip animation.

Our flip card has two sides, the front side is blank. On the front side, we will add a background image. The back contains information about a person with placeholder text. Additionally, social media links of the mentioned person are included. The CSS code begins with a global style reset. After that, the container div is centered both vertically and horizontally with a dark background. After that, the wrapper div is styled with dimensions, perspective for 3D effects, and a relative position. Then we add a hover effect to the wrapper, triggering a 180-degree Y-axis rotation of the flip card.

You May Also Like:

3D Card Flip CSS Animation [ Source Code ]:

To create this 3D Flipping Card Animation, we have to create HTML and CSS files. After that, copy the code from the code boxes below and paste them into your project. You can also download the source code from the button below.

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>3D Card Flip CSS Animation</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
		<div class="flip-card">
			<div class="front card"></div>
			<div class="back card">
				<h2>Jason Wilson</h2>
				<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Optio quae, a odit quos deleniti distinctio?</p>
				<p class="socials">
                    <i class="fa fa-facebook"></i> 
                    <i class="fa fa-twitter"></i> 
                    <i class="fa fa-pinterest"></i> 
                    <i class="fa fa-linkedin"></i>
                </p>
			</div>
		</div>
	</div>
</body>
</html>

ADD CSS:

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Poppins', sans-serif;
}
body {
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #212121;
}
.wrapper {
	position: relative;
	height: 330px;
	width: 400px;
	perspective: 1000px;
}
.wrapper .flip-card {
	position: relative;
	height: 100%;
	width: 100%;
	border-radius: 15px;
	transform-style: preserve-3d;
	transition: all 1s ease-in-out;
}
.wrapper:hover .flip-card {
	transform: rotateY(180deg);
}
.flip-card .card {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 100%;
	background: #212121;
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
	backface-visibility: hidden;
	position: absolute;
	flex-direction: column;
}
.front.card {
	background-image: url(1.jpg);
	background-size: cover;
	background-position: center center;
	border-radius: 15px;
}
.back.card {
	transform: rotateY(180deg);
	color: #fff;
	border-radius: 15px;
}
.back.card h2 {
	font-family: bebas neue;
	margin-bottom: 7px;
	font-size: 40px;
	letter-spacing: 2px;

.back.card p {
	width: 85%;
	text-align: center;
}
.socials {
	margin-top: 20px;
}
.socials i {
	margin: 0 10px;
	font-size: 20px;
}

We hope this CSS Flipping Card snippet is working for you. 3D card flip animation adds an extra layer of intrigue, making the browsing experience more enjoyable for the website visitor. You can add this flip card animation to your project and make your website more engaging to your visitors. If you want more snippets like this, you can click the load more button on our homepage. Thank you for visiting our website.

DOWNLOAD CODE

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