<!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>3D Menu</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #111;
}
ul {
margin: auto;
width: 200px;
margin-top: 200px;
transform: skewY(-7deg);
user-select: none;
}
ul >li {
list-style: none;
letter-spacing: .1em;
background: #444;
position: relative;
padding: 15px;
z-index: var(--i);
transition: all .2s;
cursor: pointer;
}
ul > li:after {
content: '';
position: absolute;
height: 100%;
width: 30px;
top: 0;
left: -30px;
background: #333;
transform: skewY(45deg);
transform-origin: right;
}
ul > li:before {
content: '';
position: absolute;
height: 30px;
width: 100%;
background: #222;
top: -30px;
left: 0;
transform: skewX(45deg);
transform-origin: bottom;
}
ul >li:hover {
transform: translateX(-50px);
}
ul >li:hover {
background: #27a9ff;
color: #fff;
}
ul >li:hover:after {
background: #2086ca;
}
ul >li:hover:before {
background: #19679b;
}
ul :last-child {
box-shadow: -15px 100px 70px gray;
}
</style>
</head>
<body>
<ul>
<li style="--i: 5;">Home Page</li>
<li style="--i: 4;">About Me</li>
<li style="--i: 3;">Contact</li>
<li style="--i: 2;">Article</li>
<li style="--i: 1;">Login</li>
</ul>
</body>
</html>
