原文地址：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創作按鈕被從紙上掀起的立體效果