Home Card 3D Flip Card Effect On Hover – HTML and CSS only

3D Flip Card Effect On Hover – HTML and CSS only

3D Flip Card Effect On Hover Using Only HTML & CSS

3D Flip Card Effect On Hover – HTML and CSS only


<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Flip Card Effect On Hover Using Only HTML & CSS</title>
    <link rel="stylesheet" href="style.css">
    <div class="flip-container">
        <div class="flip-inner-container">
            <div class="flip-front">
                <div class="profile-image">
                <h3>John Doe</h3>
                <h6>UI& UX Front-end Developer</h6>
                <div class="skills">
                    <span>UI & UX</span>
                    <span>Front-end Development</span>

            <div class="flip-back">
               <h2>John Doe</h2>
               <a href="#" class="btn btn_hire">Hire</a>
               <a href="#" class="btn btn_message">Message</a>


/*   #c500d6

@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,400;0,500;0,700;1,100&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;

  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  font-family: "Montserrat", sans-serif;

  border: 2px solid transparent;
  width: 250px;
  height: 400px;
  border-radius: 10px;
  perspective: 1000px;

/* Flip Inner Container */
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transform-style: preserve-3d;
  transition: transform 0.8s;

/* add hover to Flip horizonally */
.flip-container:hover .flip-inner-container{
  transform: rotateY(180deg);

/* position front and back */

  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  /* background-color: green; */
  border-radius: 10px;
  box-shadow: -1px 2px 13px 0px rgba(0,0,0, 0.75);

/* flip  front from Start Here */
 background:#24203b  ;
color: #ffffff;
padding: 20px;

.flip-front .profile-image{
  background-image: url("bg-image.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 150px;
  height: 150px;  
  border-radius: 50%;
  border: 4px solid #c500d6;
  margin: auto;
  margin-top: 20px;

.flip-front h3{
  margin-top: 5px;

.flip-front h6{
  font-weight: 200;
  margin: 5px 0;
  text-transform: uppercase;
.flip-front h5{
  text-transform: uppercase;
  margin: 30px 0 5px 0;

.flip-front .skills{
  border-top: 1px solid #c500d6;
  padding-top: 10px;
  font-size: 12px;
  font-weight: 400;

.flip-front .skills span{
  background: #ffffff;
  color: #c500d6;
  padding-top: 2px 5px;
  margin-bottom: 10px;
  display: inline-block;


/* flip back from Start Here */
  background: #c500d6;
  transform: rotateY(180deg);


.flip-back h2{
  margin-top: 100px;

.flip-back .btn{
display: block;
padding: 10px 20px;
background: #24203b;
text-decoration: none;
color: #ffffff;
margin: 10px;
border-radius: 20px;


.flip-back .btn:hover{
  background:  #c500d6;
  border: 2px solid #24203b;

(Visited 1,858 times, 1 visits today)


Please enter your comment!
Please enter your name here