• HTML
• CSS

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="container">
    <div class="glass" style="--r:-15;" data-text="Design">
        <i class="fa-regular fa-pen-to-square"></i>
    </div>
    <div class="glass" style="--r:5;" data-text="Code">
        <i class="fa-solid fa-code"></i>
    </div>
    <div class="glass" style="--r:25;" data-text="Launch">
        <i class="fa-solid fa-rocket"></i>
    </div>
    <div class="glass" style="--r:-15;" data-text="Earn">
        <i class="fa-solid fa-money-check-dollar"></i>
    </div>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
*
{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}
body
{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    background:#0f222f;
}
.container
{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
}
.container .glass
{
    position:relative;
    width:200px;
    height:240px;
    background:linear-gradient(#fff2,transparent);
    border:1px solid rgba(255,255,255,0.1);
    box-shadow:0 25px 25px rgba(0,0,0,0.25);
    backdrop-filter:blur(10px);
    display:flex;
    justify-content:center;
    align-items:center;
    transition:0.5s;
    border-radius:10px;
    margin:0 -45px;
    transform:rotate(calc(var(--r)*1deg));
}
.container:hover .glass
{
    transform:rotate(0deg);
    margin:0 20px;
}

.container .glass::before
{
    content:attr(data-text);
    position:absolute;
    bottom:0;
    width:100%;
    height:40px;
    background:rgba(255,255,255,0.05);
    display:flex;
    justify-content:center;
    align-items:center;
    color:#fff;
}
.container .glass i
{
    font-size:4em;
    color:#fff;
}

/* All the credist: https://www.youtube.com/watch?v=tLWaDbpw-LI */