立体按钮（基于动画transform）

效果预览：

实现原理：在按钮前后添加伪类，并使其在左和在下方显示，并做倾斜处理(transform: skew(deg,deg))，并将父级按钮进行旋转操作transform: rotate(30deg)

实现代码：
html

<main>
    <a href="">
        cheng
    </a>
</main>

css

* {
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
    background-color: #535c68;
    /*控制页面子元素 使其居中显示*/
    display: flex;
    justify-content: center;
    align-items: center;
}

main {
    /*控制div子元素使其居中显示*/
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    width: 300px;
    height: 300px;
    border: 1px solid #000;
}

main a {
    width: 150px;
    height: 100px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    box-sizing: border-box;
    background: #eb4d4b;
    color: #dff9fb;
    text-transform: uppercase;
    transition: .3s;
    transform: rotate(-45deg);
}

main:hover a {
    transform: rotate(0deg);
}


main a::before {
    content: "";
    position: absolute;
    left: -10px;
    width: 10px;
    height: 100%;
    transform: skewY(-45deg) translateY(5px);
    background: #000;
}

main a::after {
    content: "";
    position: absolute;
    bottom: -10px;
    width: 100%;
    height: 10px;
    transform: skewX(-45deg) translateX(-5px);
    background: #000;
}