原文地址：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: 0; ???padding: 0; ???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) ;}26.纯 CSS创作按钮被从纸上掀起的立体效果
原文地址：https://www.cnblogs.com/FlyingLiao/p/10296247.html