Amazing CSS 3D Menu Hover Effect
Today, we are going to see how to create an amazing CSS 3D Menu Hover Animation. It’s completely made with pure HTML and CSS. Website Navigation is the first thing that visitors will see and if you can create a navigation menu unique with cool animation then your visitor will love it.
Create an index.html file and copy the below code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 3D Menu Hover Effect</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="all">
<div class="lefter">
<div class="text">Hosting</div>
</div>
<div class="left">
<div class="text">Web Design</div>
</div>
<div class="center">
<div class="explainer">Hover Me</div>
<div class="text">Frontend Development</div>
</div>
<div class="right">
<div class="text">Backend Development</div>
</div>
<div class="righter">
<div class="text">SEO</div>
</div>
</div>
</body>
</html>
Now, create a style.css and link it to your index.html file
body{
background-image: radial-gradient(circle at center), #899dc4, #495d84;
background-size: cover;
background-repeat: no-repeat;
height: 100vh;
overflow: hidden;
display:flex;
justify-content: center;
align-items: center;
background: radial-gradient(ellipse at bottom, #1b2793, #090a0f);
}
.all{
display: flex;
perspective: 10px;
transform: perspective(300px) rotateX(20deg);
will-change: perspective;
perspective-origin: center center;
transition: all 1.3s ease-out;
justify-content: center;
transform-style: preserve-3d;
}
.all:hover{
perspective: 1000px;
transition: all 1.3s ease-in;
transform: perspective(10000px) rotateX(0deg);
}
.all:hover .text{
opacity: 1;
}
.all:hover > div{
opacity: 1;
transition-delay: 0s;
}
.all:hover .explainer{
opacity: 0;;
}
.left,
.center,
.right,
.lefter,
.righter{
width: 200px;
height: 150px;
transform-style: preserve-3d;
border-radius: 8px;
border: 1px solid #fff;
box-shadow: 0 0 20px 5px rgba(100,100,255,0.4);
/* opacity: 0; */
transition: all 0.2s ease;
transition-delay: 1s;
position: relative;
background-position: center center;
background-repeat: no-repeat;
background-color: #21a6ed;
cursor: pointer;
background-blend-mode: color-burn;
}
.left:hover,
.center:hover,
.right:hover,
.lefter:hover,
.righter:hover{
box-shadow: 0 0 30px 10px rgba(1000, 100, 255, 0.6);
background-color: #ccf;
}
.text{
transform:translateY(30px);
opacity: 0;
transition: all 0.3s ease;
bottom: 0;
left: 5px;
position: absolute;
will-change: transform;
color: #fff;
text-shadow: 0 0 5px rgba(100,100,255,0.6);
}
.lefter{
transform: translateX(-60px) translateZ(-50px) rotateY(-10deg);
background-image:url(https://cdn3.iconfinder.com/data/icons/kicon-business/24/organization-64.png);
}
.left{
transform: translateX(-30px) translateZ(-25px) rotateY(-5deg);
background-image:url(https://cdn3.iconfinder.com/data/icons/social-media-2125/80/edit-64.png);
}
.center{
opacity: 1;
background-image:url(https://cdn3.iconfinder.com/data/icons/streamline-icon-set-free-pack/48/Streamline-17-64.png);
}
.right{
transform: translateX(30px) translateZ(-25px) rotateY(5deg);
background-image:url(https://cdn4.iconfinder.com/data/icons/multimedia-75/512/multimedia-33-64.png);
}
.righter{
transform: translateX(60px) translateZ(-50px) rotateY(10deg);
background-image:url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-search-64.png);
}
.explainer{
font-weight: 300;
font-size: 2rem;
color: #fff;
width: 100%;
height: 100%;
background-color: #21a6ed;
border-radius: 8px;
text-shadow: 0 0 10px rgba(255,255,255,0.8);
display: flex;
justify-content: center;
align-items: center;
}
Related Posts
Responsive Glassmorphism Profile Card Hover Effects
Responsive Glassmorphism Profile Card Hover Effects Glassmorphism is a modern way approach to styling web components of any site page and giving a 3D as… Read More »Responsive Glassmorphism Profile Card Hover Effects
Neon Light Button Animation Effects
Neon Light Button Animation Effect In this video, we are going to see how to create a Neon Light Button Animation Effects. It’s completely… Read More »Neon Light Button Animation Effects
CSS Isometric Hamburger Menu Hover Effect
Today we are going to see how to create a CSS Isometric Hamburger Menu Hover Effect with Pure HTML & CSS. We will see everything… Read More »CSS Isometric Hamburger Menu Hover Effect
