原文地址：https://segmentfault.com/a/1190000014930183
感想：主要2D和3D转换、阴影效果。
HTML代码：
<nav>
<ul>
<li>Home</li>
<li>Products</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
CSS代码：
html, body ,ul{
margin:;
padding:;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
html, body {
background: linear-gradient(cadetblue, darkcyan);
}
/* 设置容器的样式，把背景色声明为变量 */
nav {
width: 300px;
height: 300px;
--bgcolor: lemonchiffon;
background-color: var(--bgcolor);
box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);
border-radius: 10px;
padding: 30px 0;
box-sizing: border-box;
}
nav ul{
list-style-type: none;
justify-content: space-between;
flex-direction: column;
}
nav ul li {
color: brown;
font-size: 20px;
font-family: sans-serif;
padding: 0.5em 1em;
border-radius: 0.5em;
transition: 0.5s ease-out;
}
nav ul li:hover {
/* 阴影 */
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1),
0 6px 6px rgba(0, 0, 0, 0.1),
0 8px 8px rgba(0, 0, 0, 0.1),
0 12px 12px rgba(0, 0, 0, 0.1);
/* 2D\3D转换 */
/* 大小 Y轴上位置 为3D转换元素定义透视视图，为尺寸增加视图效果 翻开角度*/
transform: scale(1.05) translateY(-0.25em) perspective(300px) rotateX(20deg) ;
}