使用CSS-skew()函数实现3D侧边栏

Shar豪

已于 2022-05-18 22:57:57 修改

阅读量323

点赞数 1

分类专栏： Web前端文章标签： css3 html5 3d

于 2022-05-18 22:41:14 首次发布

本文链接：https://blog.csdn.net/m0_56262017/article/details/124852913

版权

Web前端专栏收录该内容

12 篇文章 1 订阅

订阅专栏

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>