CSS Isometric Menu Hover Effects | Pure HTML CSS 3D Menu
In this video, we are going to learn how to create CSS Isometric Menu Hover Effects | Pure HTML CSS 3D Menu.
[embedyt] https://www.youtube.com/watch?v=eE6RblUQLN4 [/embedyt]
Source Code:
First, 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 Isometeric Menu Hover Effects</title> <link rel="stylesheet" href="style.css" /></head><body> <ul> <li style="--i:6"><a href="#">Home</a></li> <li style="--i:5"><a href="#">About</a></li> <li style="--i:4"><a href="#">Services</a></li> <li style="--i:3"><a href="#">Portfolio</a></li> <li style="--i:2"><a href="#">Team Members</a></li> <li style="--i:1"><a href="#">Contact</a></li> </ul> <ul> <li style="--i:6"><a href="#">Home</a></li> <li style="--i:5"><a href="#">About</a></li> <li style="--i:4"><a href="#">Services</a></li> <li style="--i:3"><a href="#">Portfolio</a></li> <li style="--i:2"><a href="#">Team Members</a></li> <li style="--i:1"><a href="#">Contact</a></li> </ul> </body></html>
Now, create a style.css file and copy the below code:
@import url('https://fonts.googleapis.com/css2?display=swap&family=Roboto:wght@300&display=swap');*{ margin:0; padding:0; box-sizing: border-box; font-family: 'Roboto';}body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #2A4849;}ul{ position: relative; transform: skewY(-15deg); -webkit-transform: skewY(-15deg); -moz-transform: skewY(-15deg); -ms-transform: skewY(-15deg); -o-transform: skewY(-15deg); margin-left: 150px;}ul li{ position: relative; list-style: none; width: 200px; background-color: #0ebbc5; padding:15px; z-index: var(--i); transition: 0.5s;}ul li:hover{ background:#0a848a; transform: translateX(-50px)}ul li:before{ content: ''; position: absolute; top:0; left:-40px; width: 40px; height: 100%; background-color: #0ba5b3; transform-origin:right; transform: skewY(45deg); transition: .5s;}ul li:hover:before{ background-color: #0d7a80;}ul li:after{ content: ''; position: absolute; top:-40px; left:0; width: 100%; height: 40px; background-color: #0ba5b3; transform-origin: bottom; transform: skewX(45deg); transition: 0.5s;}ul li:hover:after{ background-color: #078995;}ul li a{ text-decoration: none; color:#fff; display: block; text-transform: uppercase; font-weight: bold; letter-spacing: 0.1em; transform: 0.5s; -webkit-transform: 0.5s; -moz-transform: 0.5s; -ms-transform: 0.5s; -o-transform: 0.5s;}ul li:hover a{ color: #333;}ul li:last-child:after{ box-shadow: -120px 120px 20px rgba(0, 0, 0, 0.25);}
Full Source Code: Download