@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Oswald', sans-serif;    
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #3d3d3d;
}

.container {
    /* border: 2px solid #fdd; */
    display: flex;
    transform-style: preserve-3d;
    gap: 10px;   
    transform: rotateY(30deg) rotateX(10deg);
}

.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: 4em;
    color: #fff;
    transform-style: preserve-3d;
    transform: rotateX(calc(90deg * var(--i))) translateZ(50px);
}

.container .text:last-child span {
    background: linear-gradient(#29c040, #32ed4e);
    color: #333;
}


/* https://www.youtube.com/watch?v=GEDNdp4g--E */