@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-color: transparent;
}

.container {
    position: relative;
    display: flex;
    transform-style: preserve-3d;
    gap: 10px;
    transform: rotateY(30deg) rotateX(10deg) scale(0.8);

    animation: fadeInAnimation 1s ease-in forwards;
    opacity: 0;
    transform: translateY(-100%);
}

@keyframes fadeInAnimation {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.container .text {
    position: relative;
    width: 100px;
    height: 100px;
    transform-style: preserve-3d;
    transition: 2.5s ease-in-out;
    transition-delay: calc(0.1s * 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-color: #373737;
    transform-origin: left;
    transform: rotateY(90deg) translateX(-50px);
}

.container .text:last-child:before {
    background: #2628b2;
}

.container .text span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(#2c2c2c, #434343);
    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(#292cc0, #323bed);
    color: #333;
}