3D Flip Card Effect On Hover – HTML and CSS only
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<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">
</head>
<body>
<div class="flip-container">
<div class="flip-inner-container">
<div class="flip-front">
<div class="profile-image">
image
</div>
<h3>John Doe</h3>
<h6>UI& UX Front-end Developer</h6>
<h5>Skills</h5>
<div class="skills">
<span>UI & UX</span>
<span>Front-end Development</span>
<span>Html</span>
<span>CSS</span>
<span>Javascript</span>
<span>React</span>
</div>
</div>
<div class="flip-back">
<h2>John Doe</h2>
<a href="#" class="btn btn_hire">Hire</a>
<a href="#" class="btn btn_message">Message</a>
</div>
</div>
</div>
</body>
</html>CSS
/* #c500d6
#24203b
*/
@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;
}
body{
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
font-family: "Montserrat", sans-serif;
}
.flip-container{
border: 2px solid transparent;
width: 250px;
height: 400px;
background-color:transparent;
border-radius: 10px;
perspective: 1000px;
}
/* Flip Inner Container */
.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 */
.flip-front,
.flip-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 */
.flip-front{
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 */
.flip-back{
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)
