Card 3D Animation Effect Using HTML CSS and JavaScript

3D & Animation Effects | October 29, 2021

Learn how to create a card with 3d animation effect on hover using HTML CSS and JavaScript.

Video tutorial of Card 3D Animation Effect Using HTML CSS and JavaScript

This tutorial video can help you to Learn how to create a card with 3d animation effect on hover using HTML CSS and JavaScript.

You might like this

Card 3D Animation Effect Using HTML CSS and JavaScript [Source Codes]

This source code can help you to create a card with 3d animation effect on hover using HTML CSS and JavaScript.

jQuery library source

Images Source

HTML Code

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<div class="cards-wrapper">
	<div class="cards-container">
		
		<ul class="pro_list">
		  <li class="selected" style="background-image: url('images/pic1.jpg');" data-title="John Deo i" data-description="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam"></li>
		  <li style="background-image: url('images/pic2.jpg');" data-title="John Deo ii" data-description="sed do eiusmod
		  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam"></li>
		  <li style="background-image: url('images/pic3.jpg');" data-title="John Deo iii" data-description="quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		  consequat. Duis aute irure dolor in reprehenderit"></li>
		  <li style="background-image: url('images/pic4.jpg');" data-title="John Deo iv" data-description="voluptate velit esse
		  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."></li>
		</ul>	

		<section>
		  <article class="card">
		    <div class="card_inner">
		      <div class="card-header">
		      	<div class="pro_pic" style="background-image: url('images/pic1.jpg');"></div>
		      	<h1 class="pro_title">John Deo i</h1>
		      </div>
		      <div class="pro_description">
		      	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
		      </div>
		    </div>
		  </article>
		</section>

	</div>
	<div class="bg-radius">
	  <span id="radius1"></span>
	  <span id="radius2"></span>
	  <span id="radius3"></span>
	  <span id="radius4"></span>
	  <span id="radius5"></span>
	  <span id="radius6"></span>
	</div>
</div>






<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</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;
	margin: 0;
	background: #fff;
	color: #000;
	background: linear-gradient(250.48deg, #161616 22.86%, #303030 99.18%);
}

img{
	 width: 100%;
	 max-width: 100%;
	 vertical-align: top;
}
.cards-wrapper{
	display: flex;
	align-items: center;
	justify-content: space-around;
	min-height: 100vh;
	position: relative;
}
.cards-container{
	width: 100%;
	max-width: 1200px;
	display: flex;
	justify-content: space-between;
	align-items:center;
	position: relative;
	z-index: 1;
}
.pro_list{
	width: 150px;
	margin: 0;
	padding: 0;
	left: 0;
	z-index: 5;
}
.pro_list li{
	width: 80px;
	height: 80px;
	border-radius: 50%;
	position: relative;
	margin: 20px 0;
	transition: 0.5s;
	background-size: cover;
	background-position: center;
	background-origin: border-box;
	list-style: none;
	animation-timing-function: ease-out;
	box-shadow: 11px 11px 15px -2px rgba(0, 0, 0, 0.25);
	border:0px solid rgba(0, 0, 0, 0.3);
	cursor: pointer;
	z-index: 10;
}
.menu li.selected{
	border-width:5px;
}
.bg-radius{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.bg-radius span{
	position: absolute;
	display: block;
	list-style: none;
	width: 200px;
	height: 200px;
	background: #01c0da;
	filter: blur(15px);
	border-radius: 50%;
	transition: 1.3s ease-in-out;
	opacity:0.5;
}
.bg-radius span:nth-child(1) {
	width: 50vh;
	height: 50vh;
	top: 10%;
	left: 5%;
}
.bg-radius span:nth-child(2) {
	width: 30vh;
	height: 30vh;
	top: 55%;
	left: 30%;
}
.bg-radius span:nth-child(3) {
	width: 15vh;
	height: 15vh;
	top: 85%;
	left: 47%;
}
.bg-radius span:nth-child(4) {
	width: 50vh;
	height: 50vh;
	bottom: 10%;
	right: 5%;
}
.bg-radius span:nth-child(5) {
	width: 30vh;
	height: 30vh;
	bottom: 55%;
	right: 30%;
}
.bg-radius span:nth-child(6) {
	width: 15vh;
	height: 15vh;
	bottom: 85%;
	right: 47%;
}

section{
	display: flex;
	justify-content: center;
	width: 100%;
	height: 100%;
	align-items: center;
}
.card{
	 position: relative;
	 width: 400px;
	 height: 80vh;
	 background: linear-gradient(210deg, rgba(224, 224, 224, 0.3) 0, rgba(36, 34, 34, 0.1) 97%);
	 border-radius: 40px;
	 backdrop-filter: blur(30px);
	 transform-origin: right;
	 transform-style: preserve-3d;
}
.card.card_animated{
	animation:1.5s cardAnimated;
}
@keyframes cardAnimated{
	0%{
		transform: none;
	}
	40%{
		transform: perspective(300px) rotateY(-30deg);
	}
	60%{
		transform: perspective(300px) rotateY(-30deg);
	}
	100%{
		transform: none;
	}
}

.card_inner{
	position: relative;
	width: 100%;
	height: 100%;
	padding: 30px;
}
.card_animated .card_inner{
	animation:1s cardInnerAnimated 0.3s;
}
@keyframes cardInnerAnimated{
	0%{
		transform: none;
		opacity: 1
	}
	50%{
		transform: translateX(-120%);
		opacity: 0;
	}
	100%{
		transform: none;
		opacity: 1
	}
}

.card-header{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30px;
}
.pro_pic{
	width: 200px;
	height: 200px;
	margin-left: -130px;
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	background-origin: border-box;
	border: 5px solid rgba(0, 0, 0, 0.3) ;
	transition:all 0.5s ease-in-out;
	box-shadow: 17px 17px 17px -2px rgba(0, 0, 0, 0.25);
}
.pro_title{
	padding-left: 10px;
	color: rgba(255,255,255,0.8)
}
.pro_description{
	font-size: 22px;
	text-align: justify;
	color:rgba(255,255,255,0.8);

}

JavaScript Code

Copy

var pro_list = document.querySelectorAll('.pro_list li');
var card = document.querySelector('.card');
var pro_pic = document.querySelector('.pro_pic');
var pro_title = document.querySelector('.pro_title');
var pro_Description = document.querySelector('.pro_description');

pro_list.forEach(function(pro_listSingle) {
    pro_listSingle.addEventListener('click',function(){
        BgImg = this.style.backgroundImage;
        DataTitle = this.getAttribute("data-title");
        DataDescription = this.getAttribute("data-description");

         //alert(bgimg);
        for (var item of pro_list) {
            item.classList.remove('selected');
        }
        this.classList = "selected";

        var bg_radius1= Math.floor(Math.random() *(70-1) + 1);
        document.getElementById('radius1').style.left = bg_radius1+"vh";
        var bg_radius2= Math.floor(Math.random() *(70-1) + 1);
        document.getElementById('radius2').style.left = bg_radius2+"vh";
        var bg_radius3= Math.floor(Math.random() *(70-1) + 1);
        document.getElementById('radius3').style.left = bg_radius3+"vh";
        var bg_radius4= Math.floor(Math.random() *(70-1) + 1);
        document.getElementById('radius4').style.right = bg_radius4+"vh";
        var bg_radius5= Math.floor(Math.random() *(70-1) + 1);
        document.getElementById('radius5').style.right = bg_radius5+"vh";
        var bg_radius6= Math.floor(Math.random() *(70-1) + 1);
        document.getElementById('radius6').style.right = bg_radius6+"vh";
        
        card.classList = "card card_animated"
        setTimeout(function(){
            pro_pic.style.backgroundImage = BgImg;
            pro_title.innerHTML = DataTitle;
            pro_Description.innerHTML = DataDescription;

        },700);
        setTimeout(function(){
            card.classList.remove("card_animated");
        },1500)
    });
});