*{
    margin: 0;padding: 0;box-sizing: border-box;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #3d3d3d;
}
.container{
    position: relative;
    display: flex;
    gap: 10px;
    transform-style: preserve-3d;
    transform: rotateX(10deg) rotateY(30deg);
}
.container .text{
    position: relative;
    width: 100px;
    height: 100px;
    transform-style: preserve-3d;
    transition: 2.5s ease-in-out;
    transition-delay: calc(0.25s * var(--j));
}
.container:hover .text{
    transform: rotateX(-360deg);
}
.container:hover .text:last-child{
    transform: rotateX(630deg);
}
.container .text::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #373737;
    transform-origin: left;
    transform: rotateY(90deg) translateX(-50px);
}

.container .text:last-child:before{
    background: #29ab3c;
}
.container .text span{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(#434343, #535353);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 4rem;
    color: #fff;
    transform-style: preserve-3d;
    transform: rotateX(calc(90deg * var(--i))) translateZ(50px);
}
.container .text:last-child span{
    background: linear-gradient(#29c040, #32ed4e);
}