Összehajló tér

.we-loading-fold {
    position: relative;
    width: 110px;
    height: 110px;
    perspective: 700px;
    transform-style: preserve-3d;
}

.we-loading-fold-panel {
    position: absolute;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(122, 201, 142, .72);
    background: rgba(63, 159, 99, .10);
    box-shadow:
        inset 0 0 18px rgba(122, 201, 142, .06),
        0 0 20px rgba(63, 159, 99, .08);
    transform-style: preserve-3d;
}

.we-loading-fold-top {
    top: 4px;
    left: 38px;
    transform-origin: center bottom;
    animation: weFoldTop 2.4s ease-in-out infinite;
}

.we-loading-fold-right {
    top: 38px;
    right: 4px;
    transform-origin: left center;
    animation: weFoldRight 2.4s ease-in-out infinite;
}

.we-loading-fold-bottom {
    bottom: 4px;
    left: 38px;
    transform-origin: center top;
    animation: weFoldBottom 2.4s ease-in-out infinite;
}

.we-loading-fold-left {
    top: 38px;
    left: 4px;
    transform-origin: right center;
    animation: weFoldLeft 2.4s ease-in-out infinite;
}

.we-loading-fold-core {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 45px;
    left: 45px;
    background: #7ac98e;
    transform: rotate(45deg);
    box-shadow:
        0 0 24px rgba(122, 201, 142, .45);
    animation: weFoldCore 2.4s ease-in-out infinite;
}

@keyframes weFoldTop {
    0%,
    100% {
        transform:
            rotateX(0deg)
            translateZ(0);
    }

    42%,
    58% {
        transform:
            rotateX(-70deg)
            translateZ(18px);
    }
}

@keyframes weFoldRight {
    0%,
    100% {
        transform:
            rotateY(0deg)
            translateZ(0);
    }

    42%,
    58% {
        transform:
            rotateY(70deg)
            translateZ(18px);
    }
}

@keyframes weFoldBottom {
    0%,
    100% {
        transform:
            rotateX(0deg)
            translateZ(0);
    }

    42%,
    58% {
        transform:
            rotateX(70deg)
            translateZ(18px);
    }
}

@keyframes weFoldLeft {
    0%,
    100% {
        transform:
            rotateY(0deg)
            translateZ(0);
    }

    42%,
    58% {
        transform:
            rotateY(-70deg)
            translateZ(18px);
    }
}

@keyframes weFoldCore {
    0%,
    100% {
        transform:
            rotate(45deg)
            scale(.7);
        opacity: .35;
    }

    50% {
        transform:
            rotate(225deg)
            scale(1.15);
        opacity: 1;
    }
}

document.querySelectorAll(".we-loading-fold").forEach(loader => {
    loader.setAttribute("aria-label", "Betöltés");
});