1. 通过2Dskew()扭曲函数实现真实3D抽屉效果,可作为侧边栏使用。
效果图
2. CSS代码
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
}
body ul {
transform: skewY(-15deg);
}
body ul li {
position: relative;
list-style: none;
background-color: #3e4046;
z-index: var(--i);
transition: 0.6s;
}
body ul li a {
display: block;
width: 200px;
height: 60px;
text-align: center;
line-height: 60px;
color: #fff;
text-decoration: none;
}
body ul li::before {
position: absolute;
left: -60px;
content: "";
width: 60px;
height: 60px;
background-color: #2f3133;
transform-origin: right;
transform: skewY(45deg);
}
body ul li::after {
position: absolute;
top: -60px;
content: "";
width: 200px;
height: 60px;
background-color: #36383e;
transform-origin: bottom;
transform: skewX(45deg);
}
body ul li:hover {
background-color: #33a3ef;
transform: translateX(-50px);
}
3. HTML代码
<body>
<ul>
<li style="--i:4"><a href="">A</a></li>
<li style="--i:3"><a href="">B</a></li>
<li style="--i:2"><a href="">C</a></li>
<li style="--i:1"><a href="">D</a></li>
</ul>
</body>
4. 注意:
1.skewX()以逆时针为正向扭曲,例如:skew(45deg)是向左倾斜。
2.skewY()以顺时针为正向扭曲,例如:skew(-15deg)是向上扭曲。