3D Flip Card with HTML and CSS

In this article, we will learn how to create 3d Flip Card using only HTML & CSS. Earlier in this blog, I have shared a couple of simple Card Design, but here in this blog, I am going to create a 3d flip card animation only with HTML and CSS. Apart from this, I have shared many animation in my blog. Please make sure to check those as well.

Below is the video tutorials. watch and practices.

Website card is a powerful manner to give your enterprise details, multi function location, optimized for cell devices. As you are probable conscious, internet access from cell devices surpassed computing device about few years ago, so it's miles more essential than ever for corporations to have a cell-pleasant presence. Internet cards provide a convenient way to archive this.

Source Code:

First, you have to create two files. One of them is HTML, and the other is CSS. after creating the files, paste the code provided below.

HTML CODE:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Flip Card | By Code Info</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  </head>
  <body>
    <div class="flip-container">
      <div class="flip-inner-container">
        <div class="flip-front">
          <img src="pic/front-img.jpg" />
        </div>
        <div class="flip-back">
          <div class="profile-image">
            <img src="pic/logo.png" />
            <h2>Code Info</h2>
            <p>Web Developer | Content Creator | Youtuber</p>

            <ul>
              <a href="#"><i class="fab fa-facebook-f"></i></a>
              <a href="#"><i class="fab fa-instagram"></i></a>
              <a href="#"><i class="fab fa-youtube"></i></a>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you have to create a file with .css extension.

CSS CODE:

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap");

body {
  font-family: "Poppins", sans-serif;
  background: #c500d6;
}
.flip-container {
  width: 280px;
  height: 380px;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  perspective: 1000px;
  margin: 100px auto;
}

.flip-inner-container {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transform-style: preserve-3d;
  transition: transform 0.8s;
}

.flip-container:hover .flip-inner-container {
  transform: rotateY(180deg);
  cursor: pointer;
}

.flip-front,
.flip-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 10px;
}
.flip-front {
  background: white;
  padding: 2px;
}

.flip-front img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

.flip-back {
  width: 280px;
  height: 380px;
  background: white;
  transform: rotateY(180deg);
}

.flip-back .profile-image img {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  border: 4px solid #c500d6;
  margin-top: 20px;
}

.flip-back p {
  font-size: 13px;
  font-weight: 500;
}

.flip-back ul {
  display: flex;
  margin: 20px 20px;
}

.flip-back ul a {
  display: block;
  height: 40px;
  width: 40px;
  color: #fff;
  text-align: center;
  margin: 0 7px;
  line-height: 38px;
  border: 2px solid transparent;
  border-radius: 50%;
  background: #c500d6;
  transform: all 0.6s;
}
.flip-back ul a:hover {
  color: #c500d6;
  border-color: #c500d6;
  background: linear-gradient(375deg, transparent, transparent);
}@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap");

body {
  font-family: "Poppins", sans-serif;
  background: #c500d6;
}
.flip-container {
  width: 280px;
  height: 380px;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  perspective: 1000px;
  margin: 100px auto;
}

.flip-inner-container {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transform-style: preserve-3d;
  transition: transform 0.8s;
}

.flip-container:hover .flip-inner-container {
  transform: rotateY(180deg);
  cursor: pointer;
}

.flip-front,
.flip-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 10px;
}
.flip-front {
  background: white;
  padding: 2px;
}

.flip-front img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

.flip-back {
  width: 280px;
  height: 380px;
  background: white;
  transform: rotateY(180deg);
}

.flip-back .profile-image img {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  border: 4px solid #c500d6;
  margin-top: 20px;
}

.flip-back p {
  font-size: 13px;
  font-weight: 500;
}

.flip-back ul {
  display: flex;
  margin: 20px 20px;
}

.flip-back ul a {
  display: block;
  height: 40px;
  width: 40px;
  color: #fff;
  text-align: center;
  margin: 0 7px;
  line-height: 38px;
  border: 2px solid transparent;
  border-radius: 50%;
  background: #c500d6;
  transform: all 0.6s;
}
.flip-back ul a:hover {
  color: #c500d6;
  border-color: #c500d6;
  background: linear-gradient(375deg, transparent, transparent);
}

I hope you liked this snippet. If so, please share the blog and follow us in our social media profiles and stay connected with this blog. Thank you for visiting.

You may like this:

Source Code:

2 Comments

Post a Comment

About Us

Contact Form