Flipping Card UI Design in HTML & CSS

By
CodingNepal
-

Flipping Card UI Design in HTML & CSS

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 below. After watching the given video tutorial, you also get the idea, of how all the HTML and CSS code is working behind it.

Flipping Card UI Design in HTML & CSS | Video Tutorial

I have provided all the HTML and CSS code that I have used to create this project [Flipping Card UI Design], before jumping into the source code file. I would like to briefly explain the given video.

As you have seen in the video tutorial of this project [Flipping Card UI Design]. At first on the screen we saw, there were two gradient balls. Between those two balls, there was our card with some basic information that debit cards need to have like name, card number, expiry date, and others. When I hover over the card, it flipped and the back part of the card visibled. On the back part, there is some other information that typical has.

As you have seen, how I created those two balls. the card and its UI design and the code that is used to flip it by using only HTML and CSS. I hope you also can create this type of card with flipping animation on hove by using HTML and CSS. If you are feeling difficulty to create this project [Flipping Card UI Design], I have provided all the HTML and CSS code and all the images that I have used to create this Card, which you can find below.

You May Like This:

Flipping Card UI Design [Source Codes]

To create a  Flipping Card UI Design using HTML and 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

Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the source codes of this Border Loading Animation by clicking on the given download button.

First, paste the following codes into your index.html file

<!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>


/* 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.

 

View Live Demo

 

Previous articleDisable Right Click, Copy, Cut & Paste using JavaScript
Next articleResize and Compress Images in HTML CSS & JavaScript

RELATED ARTICLESMORE FROM AUTHOR