3D Flip Card on Hover using HTML & CSS

Hello readers, Today in this blog you’ll learn how to create a 3D Card Flip Card on Hover in HTML & CSS.
What is a card, accurately? Well, they come in all sorts of shapes and sizes, but common cards will include information such as a title, a user name, a picture, and several icons. Sometimes there might be a brief volume of text, for example, a product summary.

Today in this blog I’ll share with you this program (3D Flip Card on Hover using HTML & CSS). At first, this card in the initial stage where there is no 3D animation or effect but when you hover on this card it rotates 180deg with 3D visualization. In this card, there are two faces (front and back face). At first, there are shown a front face but when you hover on it then it rotates with 3D visualization and shown back face.

If you’re feeling difficulty to understanding what I’m saying then you can Try the code below to check the output yourself.Still facing issues? Feel free to mail us your queries on info@vikashtech.com

HTML

<!DOCTYPE html>
<!-- Created By praveen kumar -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
   
    <title>3D Flip Card</title>
    <link rel="stylesheet" href="blog.css">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  </head>
  <body>
    <div class="center">
      <div class="front-face">
        <div class="contents front">
          <p>
Praveen Kumar</p>
<span>patna, Bihar</span>
        </div>
</div>
<div class="back-face">
        <div class="contents back">
          <h2>
VikashTech</h2>
<span>Follow Me</span>
          <div class="icons">
            <i class="fab fa-facebook-f"></i>
            <i class="fab fa-twitter"></i>
            <i class="fab fa-instagram"></i>
            <i class="fab fa-linkedin-in"></i>
          </div>
</div>
</div>
</div>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Montserrat:600&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  height: 100vh;
  font-family: 'Montserrat', sans-serif;
  background: linear-gradient(45deg,#d8f2f3 0%,#ebf9f9 100%);
}
.center,.front-face,
.contents,.back-face{
  position: absolute;
}
.center{
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 400px;
  width: 290px;
  transform-style: preserve-3d;
 perspective: 1000px;
}
.front-face, .back-face{
  height: 100%;
  width: 100%;
  text-align: center;
  background: linear-gradient(rgba(0,0,0,.2),
              rgba(0,0,0,.2)),url(logo.jpg);
  background-size: cover;
  background-position: center;
  transform: translateY(0deg);
  border-radius: 10px;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.4,.2,.2,1);
}
.contents{
  left: 0%;
  top: 50%;
  width: 100%;
  perspective: 1000px;
  transform: translateY(-50%) translateZ(60px) scale(0.94);
}
.front p{
  font-size: 35px;
  margin-bottom: 15px;
  color: white;
}
.front span{
  font-size: 23px;
  color: white;
}
.front p:after{
  content: '';
  display: block;
  left: 0;
  right: 0;
  width: 100px;
  height: 2px;
  background: white;
  margin: 0 auto;
  margin-top: 10px;
}
.back-face{
  transform: rotateY(180deg);
  background: linear-gradient(45deg,#043348 0%,#032535 100%);
}
.back {
  color: white;
}
.back h2{
  font-size: 33px;
  padding-bottom: 5px;
}
.back span{
  font-size: 25px;
}
.icons{
  margin: 10px 0;
  display: block;
}
i.fab{
  color:  #042f4b;
  font-size: 20px;
  height: 40px;
  width: 40px;
  background: white;
  border-radius: 50%;
  margin: 0 5px;
  line-height: 40px;
  cursor: pointer;
}
.center:hover > .back-face{
  transform: rotateY(0deg);
}
.center:hover > .front-face{
  transform: rotateY(-180deg);
}

Pure CSS Responsive Cards Design with Hover Effect

Hello readers, Today in this blog you’ll learn how to create Responsive Cards with Hover Effect in HTML & CSS only.
Maybe you know what is a card on the website. If you don’t know about this, Often cards are used to organize listings of blog posts, products, services, etc. Section with border and content and take margin from another one they are cards.
As you can see in the image, this is a pure CSS card with a hover effect. you can see there are three cards, icons, buttons, and some dummy texts. These cards are fully responsive with the help of CSS @media property. To create these Cards, I used simple and easy HTML CSS codes which help the beginner to understand easily.

If you’re feeling difficulty to understanding what I’m saying then you can Try the code below to check the output yourself.Still facing issues? Feel free to mail us your queries on info@vikashtech.com

HTML

<!DOCTYPE html>
<!-- Created By praveen kumar -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    
    <title>Responsive Cards</title>
    <link rel="stylesheet" href="blog.css">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <div class="cards">
      <h2 class="header">
Responsive Cards CSS</h2>
<div class="services">
        <div class="content content-1">
          <div class="fab fa-twitter">
</div>
<h2>
Twitter</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita ullam aliquid non eligendi, nemo est neque reiciendis error?</p>
<a href="#">Read More</a>
        </div>
<div class="content content-2">
          <div class="fab fa-instagram">
</div>
<h2>
Instagram</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita ullam aliquid non eligendi, nemo est neque reiciendis error?</p>
<a href="#">Read More</a>
        </div>
<div class="content content-3">
          <div class="fab fa-youtube">
</div>
<h2>
Youtube</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita ullam aliquid non eligendi, nemo est neque reiciendis error?</p>
<a href="#">Read More</a>
        </div>
</div>
</div>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800|Poppins&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Montserrat',sans-serif;
}
.cards{
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
  padding: 30px;
}
.cards h2.header{
  font-size: 40px;
  margin: 0 0 30px 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.services{
  display: flex;
  align-items: center;
}
.content{
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  margin: 20px;
  padding: 20px;
  border: 2px solid black;
  border-radius: 4px;
  transition: all .3s ease;
}
.content .fab{
  font-size: 70px;
  margin: 16px 0;
}
.content > *{
  flex: 1 1 100%;
}
.content:hover{
  color: white;
}
.content:hover a{
  border-color: white;
  background: white;
}
.content-1:hover{
  border-color: #1DA1F2;
  background: #1DA1F2;
}
.content-1:hover a{
  color: #1DA1F2;
}
.content-2:hover{
  border-color: #E1306C;
  background: #E1306C;
}
.content-2:hover a{
  color: #E1306C;
}
.content-3:hover{
  border-color: #ff0000;
  background: #ff0000;
}
.content-3:hover a{
  color: #ff0000;
}
.content h2{
  font-size: 30px;
  margin: 16px 0;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.content p{
  font-size: 17px;
  font-family: 'Poppins',sans-serif;
}
.content a{
  margin: 22px 0;
  background: black;
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  border: 1px solid black;
  padding: 15px 0;
  border-radius: 25px;
  transition: .3s ease;
}
.content a:hover{
  border-radius: 4px;
}
@media (max-width: 900px) {
  .services{
    display: flex;
    flex-direction: column;
  }
}

Responsive Services Box with Flip Animation using only HTML & CSS

Hello readers, Today in this blog you’ll learn how to create Fully Responsive Services Box with Flip Animation using only HTML & CSS.

The services page is one of the most important pages on your website to show what you offer to your visitors or content viewers. Based on the service you need to figure out the best way to explain it. These could be through short sentences, long paragraphs, bullet point sections, or video.

In this program (Responsive Services Box with Flip Animation), on the webpage, there are three service cards or boxes with the icon and title of the services but when you hover on a particular box then the description of that hovered services card will be visible with a flip animation. This flip animation is fully based on HTML & CSS and these boxes are responsive for any devices.
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>Responsive Services Box | VikashTech</title> -->
    <link rel="stylesheet" href="blog.css">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <div class="wrapper">
      <div class="box">
        <div class="front-face">
          <div class="icon">
<i class="fas fa-code"></i></div>
<span>Web Design</span>
        </div>
<div class="back-face">
          <span>Web Design</span>
          <p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem in deleniti vitae beatae veritatis aliquid porro perspiciatis dolores impedit ad.</p>
</div>
</div>
<div class="box">
        <div class="front-face">
          <div class="icon">
<i class="fas fa-chart-line"></i></div>
<span>Advertising</span>
        </div>
<div class="back-face">
          <span>Advertising</span>
          <p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem in deleniti vitae beatae veritatis aliquid porro perspiciatis dolores impedit ad.</p>
</div>
</div>
<div class="box">
        <div class="front-face">
          <div class="icon">
<i class="fas fa-rocket"></i></div>
<span>Game Design</span>
        </div>
<div class="back-face">
          <span>Game Design</span>
          <p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem in deleniti vitae beatae veritatis aliquid porro perspiciatis dolores impedit ad.</p>
</div>
</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;
}
body{
  height: 100%;
  width: 100%;
  text-align: center;
  background: #f2f2f2;
}
.wrapper{
  display: grid;
  margin: 200px 90px auto;
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}
@media (max-width: 700px) {
  .wrapper{
    margin: 200px auto;
  }
}
.wrapper .box{
  width: 350px;
  margin: 0 auto;
  position: relative;
  perspective: 1000px;
}
.wrapper .box .front-face{
  background: #fff;
  height: 220px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0px 5px 20px 0px rgba(0, 81, 250, 0.1);
  transition: all 0.5s ease;
}
.box .front-face .icon{
  height: 80px;
}
.box .front-face .icon i{
  font-size: 65px;
}
.box .front-face span,
.box .back-face span{
  font-size: 22px;
  font-weight: 600;
  text-transform: uppercase;
}
.box .front-face .icon i,
.box .front-face span{
  background: linear-gradient(-135deg, #c850c0, #4158d0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.box .back-face{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  height: 220px;
  width: 100%;
  padding: 30px;
  color: #fff;
  opacity: 0;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  background: linear-gradient(-135deg, #c850c0, #4158d0);
  transform: translateY(110px) rotateX(-90deg);
  box-shadow: 0px 5px 20px 0px rgba(0, 81, 250, 0.1);
  transition: all 0.5s ease;
}
.box .back-face p{
  margin-top: 10px;
  text-align: justify;
}
.box:hover .back-face{
  opacity: 1;
  transform: rotateX(0deg);
}
.box:hover .front-face{
  opacity: 0;
  transform: translateY(-110px) rotateX(90deg);
}

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 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);
}