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.
[embedyt] https://www.youtube.com/watch?v=Mt7kQG0gj0c [/embedyt]
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;}
0 Comments