Creating a 3D Card Flip CSS Animation:Source Code Inside

Adding elements to your website can make a significant difference in user experience. One such element that can catch the eye and leave a lasting impression is a 3D card flip animation. This effect allows you to create visually appealing card flips that can be used for showcasing products, portfolio items, or any other content you want to highlight.

In this blog post, we’ll walk you through the process of creating a 3D card flip CSS animation step by step.

Step 1: HTML Structure For 3D Card Flip Animation

This HTML code sets up a webpage with a 3D card flip animation. It features a front card face and a back card face with content along with social media icons. The code includes necessary links to fonts and CSS styles to achieve the desired design. Here is the code example:

<!DOCTYPE html>
<html lang="en">
<!-- -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Card Flip CSS Animation</title>
<link href=";500&display=swap" rel="stylesheet">
<link href="" rel="stylesheet">
<link rel="stylesheet" href="">
<link rel="stylesheet" href="style.css">
<div class="wrapper">
<div class="flip-card">
<div class="front card"></div>
<div class="back card">
<h2>Seaside Serenity</h2>
<p> The gentle breeze and the warmth of the sun make it the perfect escape.</p>
<p class="socials">
<i class="fa fa-facebook"></i> 
<i class="fa fa-twitter"></i> 
<i class="fa fa-linkedin"></i>

Step 2: Styling 3D Card Flip Animation

This CSS code sets up a 3D card flip animation within an HTML document. It defines styling for a card container, including its size, perspective, and border radius. When hovered, the card rotates to reveal a back face with a background image, text content, and social media icons.

* {
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: pink;
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;

Creating a 3D Card Flip CSS Animation:Source Code Inside Demo

Creating a 3D card flip CSS animation may seem complex, but by following these straightforward steps, you can easily incorporate this eye-catching element into your website. By setting up your HTML structure, styling your card, and adding the flip animation, you’ll be able to showcase your content in a dynamic and engaging way, enhancing the overall user experience on your site.

You Might Be Interested In:

Ashfaq Ahmed is a freelance WordPress developer and owner of I developed modern and highly interactive websites. I always focus on improving my development and design skills.

Leave a Comment