3D Flip Card Hover Effect using CSS | css flip Image hover effect

This tutorial blog to learn how to create 3d card flip hover effect using only CSS and HTML.

Video tutorial of 3D Flip Card Hover Effect using CSS

This video to learn how to create 3d card flip hover effect using only css and html.

3D Flip Card Hover Effect using CSS [Source Codes]

This source code can help you to create 3D Flip Card Hover Effect using CSS

You can also download this source code through the given link. Click here to download source code

HTML Code

Copy

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Home</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/css.css">
</head>
<body>

<div class="card-box">
	<div class="card-box-front">
		<img src="img/profile.png">
	</div>
	<div class="card-box-back">
		<div class="card-box-back-in">
			<h4>Profile Name</h4>
			<div class="social_links">
				<a href="#"><i class="fab fa-facebook-square"></i></a>
				<a href="#"><i class="fab fa-linkedin"></i></a>
				<a href="#"><i class="fab fa-instagram-square"></i></a>
				<a href="#"><i class="fab fa-youtube-square"></i></a>
			</div>
		</div>
	</div>
</div>

</body>
</html>

CSS Code

Copy

*,*:after,*:before{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
body{
	font-family: arial;
	font-size: 16px;
	background: gray;
}

.card-box{
	max-width: 300px;
	height: auto;
	margin:100px auto;
	position: relative;
	cursor: pointer;
}
.card-box-front{
	position: relative;
	backface-visibility: hidden;
	transition: all 0.3s ease-in-out;
	transform: perspective(500px) rotateY(0deg);
}
.card-box-front img{
	min-width: 100%;
	max-width: 100%;
	display: block;
}
.card-box-back{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	background: lightcyan;
	backface-visibility: hidden;
	transition: all 0.3s ease-in-out;
	transform: perspective(500px) rotateY(180deg);
}
.card-box:hover .card-box-front{
	transform: perspective(500px) rotateY(-180deg);
}
.card-box:hover .card-box-back{
	transform: perspective(500px) rotateY(0deg);
}
.card-box-back h4{
	font-size: 30px;
}
.card-box-back-in{
	width: 100%;
	text-align: center;
}
.social_links a{
	font-size: 30px;
	display: inline-block;
	margin:0 5px;
}
.social_links a i{
	color: gray;
}
.social_links a:hover .fa-facebook-square{
	color: #3b5998 
}
.social_links a:hover .fa-linkedin{
	color: #0e76a8  
}
.social_links a:hover .fa-instagram-square{
	color: #3f729b  
}
.social_links a:hover .fa-youtube-square{
	color: #c4302b  
}

3D Flip Card Hover Effect using CSS | css flip Image hover effect

Video tutorial of 3D Flip Card Hover Effect using CSS

3D Flip Card Hover Effect using CSS [Source Codes]

Build a Stop-Watch Web App Using JavaScript

Build Loan EMI Calculator DIY Finance Tool using JavaScript

Navigation Menu Click to Single Page Website Smooth Scrolling Using jQuery