26.纯 CSS创作按钮被从纸上掀起的立体效果

原文地址：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) ;
}