Hey buddy, I hope you are doing are creating an exciting project. Today I have brought a beautiful project for you. Bascially today you will learn to create a Card with Flipping Animation in HTML CSS and JavaScript. There are lots of other Card designs I have already created before.
A card is a section that can be square or rectangular and contains some vital information about a particular. Cards can be in various types like profile cards, product cards,s and the least goes on.
Take a look at the given image of our project [Flipping Card UI Design]. As you can see there are two beautiful gradients two balls and between them, there is a card with grassmorphism UI. In the card, there is a master card logo, chip, and some card owner details like card number, name, and the valid date of the card. The interesting part of this project is when you hover over the card it will flid and the back side of the card visible. On the back side of that card, I have added some other information as well.
To see the real demo of this card and how it flips and the back part of this card, you can watch the given video tutorial of this project [Flipping Card UI Design], that I have given end of this page live demo
Flipping Card UI Design [Source Codes]
To build Flipping Card UI Design using HTML CSS , follow the given steps line by line:
1. Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
2. Create an index.html file. The file name must be index and its extension .html
3. Create a style.css file. The file name must be style and its extension .css
First, paste the following codes into your index.html file.
<!-- Coding By CodingNepal - codingnepalweb.com -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flipping Card UI Design</title>
<link rel="stylesheet" href="style.css" />
<div class="card front-face">
<!--<img src="images/logo.png" alt="" />-->
<!--<img src="images/chip.png" alt="" class="chip" />-->
<div class="card-details">
<div class="name-number">
<h5 class="number">8050 2030 3020 5040</h5>
<h5 class="name">Prem Kumar Shahi</h5>
<div class="card back-face">
For customer service call +977 4343 3433 or email at
<span class="magnetic-strip"></span>
<div class="signature"><i>005</i></div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia
maiores sed doloremque nesciunt neque beatae voluptatibus doloribus.
Libero et quis magni magnam nihil temporibus? Facere consectetur
dolore reiciendis et veniam.
<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flipping Card UI Design</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<section>
<div class="container">
<div class="card front-face">
<header>
<span class="logo">
<!--<img src="images/logo.png" alt="" />-->
<h5>Master Card</h5>
</span>
<!--<img src="images/chip.png" alt="" class="chip" />-->
</header>
<div class="card-details">
<div class="name-number">
<h6>Card Number</h6>
<h5 class="number">8050 2030 3020 5040</h5>
<h5 class="name">Prem Kumar Shahi</h5>
</div>
<div class="valid-date">
<h6>Valid Thru</h6>
<h5>05/28</h5>
</div>
</div>
</div>
<div class="card back-face">
<h6>
For customer service call +977 4343 3433 or email at
mastercard@gmail.com
</h6>
<span class="magnetic-strip"></span>
<div class="signature"><i>005</i></div>
<h5>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia
maiores sed doloremque nesciunt neque beatae voluptatibus doloribus.
Libero et quis magni magnam nihil temporibus? Facere consectetur
dolore reiciendis et veniam.
</h5>
</div>
</div>
</section>
</body>
</html>
Second, paste the following codes into your style.css file
/* Import Google Font - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");
font-family: "Poppins", sans-serif;
transform: translate(-150px, -100px);
background: linear-gradient(90deg, #9c27b0, #f3f5f5);
transform: translate(150px, 100px);
background: linear-gradient(90deg, #9c27b0, #f3f5f5);
transform-style: preserve-3d;
transform: rotateY(180deg);
backdrop-filter: blur(25px);
background: rgba(255, 255, 255, 0.1);
box-shadow: 0 25px 45px rgba(0, 0, 0, 0.25);
border: 1px solid rgba(255, 255, 255, 0.1);
backface-visibility: hidden;
justify-content: space-between;
.front-face .card-details {
justify-content: space-between;
padding: 15px 25px 25px 25px;
transform: rotateY(180deg);
.card.back-face .magnetic-strip {
.card.back-face .signature {
justify-content: flex-end;
background: repeating-linear-gradient(
/* Import Google Font - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
section {
position: relative;
min-height: 100vh;
width: 100%;
background: #121321;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
perspective: 1000px;
}
section::before {
content: "";
position: absolute;
height: 240px;
width: 240px;
border-radius: 50%;
transform: translate(-150px, -100px);
background: linear-gradient(90deg, #9c27b0, #f3f5f5);
}
section::after {
content: "";
position: absolute;
height: 240px;
width: 240px;
border-radius: 50%;
transform: translate(150px, 100px);
background: linear-gradient(90deg, #9c27b0, #f3f5f5);
}
.container {
position: relative;
height: 225px;
width: 375px;
z-index: 100;
transition: 0.6s;
transform-style: preserve-3d;
}
.container:hover {
transform: rotateY(180deg);
}
.container .card {
position: absolute;
height: 100%;
width: 100%;
padding: 25px;
border-radius: 25px;
backdrop-filter: blur(25px);
background: rgba(255, 255, 255, 0.1);
box-shadow: 0 25px 45px rgba(0, 0, 0, 0.25);
border: 1px solid rgba(255, 255, 255, 0.1);
backface-visibility: hidden;
}
.front-face header,
.front-face .logo {
display: flex;
align-items: center;
}
.front-face header {
justify-content: space-between;
}
.front-face .logo img {
width: 48px;
margin-right: 10px;
}
h5 {
font-size: 16px;
font-weight: 400;
}
.front-face .chip {
width: 50px;
}
.front-face .card-details {
display: flex;
margin-top: 40px;
align-items: flex-end;
justify-content: space-between;
}
h6 {
font-size: 10px;
font-weight: 400;
}
h5.number {
font-size: 18px;
letter-spacing: 1px;
}
h5.name {
margin-top: 20px;
}
.card.back-face {
border: none;
padding: 15px 25px 25px 25px;
transform: rotateY(180deg);
}
.card.back-face h6 {
font-size: 8px;
}
.card.back-face .magnetic-strip {
position: absolute;
top: 40px;
left: 0;
height: 45px;
width: 100%;
background: #000;
}
.card.back-face .signature {
display: flex;
justify-content: flex-end;
align-items: center;
margin-top: 80px;
height: 40px;
width: 85%;
border-radius: 6px;
background: repeating-linear-gradient(
#fff,
#fff 3px,
#efefef 0px,
#efefef 9px
);
}
.signature i {
color: #000;
font-size: 12px;
padding: 4px 6px;
border-radius: 4px;
background-color: #fff;
margin-right: -30px;
z-index: -1;
}
.card.back-face h5 {
font-size: 8px;
margin-top: 15px;
}
If you face any difficulties while creating your Credit Card or your code is not working as expected, you can download the source code files for this Card for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.