Blog / General

M/s VIKASH TECH - 3D Flip Card on Hover using only HTML & CSS

Hello readers, Today in this blog you'll learn how to create a 3D Flip Card on Hover using only HTML & CSS. A card is a small rectangular box wit

September 19, 2022 · 2 min read

Hello readers, Today in this blog you'll learn how to create a 3D Flip Card on Hover using only HTML & CSS.
A card is a small rectangular box with images and text. It is an entrance point for users to learn more details. To maintain the usability of the website interface, the card UI pattern is a default choice. Because cards are easy to use, they can also show content that contains different details.
In this program (3D Flip Card on Hover), at first, on the webpage, there is a front part of the card which means image, and when you hover on that image, this card flip or rotate with 3d style and shows you the back part of the card. And in the backside of the card, there is a profile image, title, and some social media icons.

If you‚Äôre feeling difficult to understand what I am saying. You can try Own with below code copy and paste it.

HTML

<!DOCTYPE html>
<!-- Created By praveen kumar -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <!-- <title>3D Flip Card on Hover | VikashTech</title> -->
    <link rel="stylesheet" href="blog.css">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  </head>
  <body>
    <div class="wrapper">
      <div class="card front-face">
        <img src="profile.png">
      </div>
<div class="card back-face">
        <img src="profile.png">
        <div class="info">
          <div class="title">
CodingLab</div>
<p>
User interface designer and <br>front-end developer</p>
</div>
<ul>
          <a href="#"><i class="fab fa-facebook-f"></i></a>
          <a href="#"><i class="fab fa-twitter"></i></a>
          <a href="#"><i class="fab fa-instagram"></i></a>
          <a href="#"><i class="fab fa-youtube"></i></a>
        </ul>
</div>
</div>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  width: 100%;
  place-items: center;
  background: linear-gradient(375deg, #1cc7d0, #2ede98);
}
::selection{
  color: #fff;
  background: #1cc7d0;
}
.wrapper{
  height: 400px;
  width: 320px;
  position: relative;
  transform-style: preserve-3d;
 perspective: 1000px;
}
.wrapper .card{
  position: absolute;
  height: 100%;
  width: 100%;
  padding: 5px;
  background: #fff;
  border-radius: 10px;
  transform: translateY(0deg);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
  transition: transform 0.7s cubic-bezier(0.4,0.2,0.2,1);
}
.wrapper:hover > .front-face{
  transform: rotateY(-180deg);
}
.wrapper .card img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 10px;
}
.wrapper .back-face{
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-direction: column;
  transform: rotateY(180deg);
}
.wrapper:hover > .back-face{
  transform: rotateY(0deg);
}
.wrapper .back-face img{
  height: 150px;
  width: 150px;
  padding: 5px;
  border-radius: 50%;
  background: linear-gradient(375deg, #1cc7d0, #2ede98);
}
.wrapper .back-face .info{
  text-align: center;
}
.back-face .info .title{
  font-size: 30px;
  font-weight: 500;
}
.back-face ul{
  display: flex;
}
.back-face ul a{
  display: block;
  height: 40px;
  width: 40px;
  color: #fff;
  text-align: center;
  margin: 0 5px;
  line-height: 38px;
  border: 2px solid transparent;
  border-radius: 50%;
  background: linear-gradient(375deg, #1cc7d0, #2ede98);
  transition: all 0.5s ease;
}
.back-face ul a:hover{
  color: #1cc7d0;
  border-color: #1cc7d0;
  background: linear-gradient(375deg, transparent, transparent);
}

M/s VIKASH TECH - 3D Flip Card on Hover using only HTML & CSS

Vikash Mishra