:root {
    --mess: 0;
}

body {
    background: radial-gradient(circle, rgba(82, 173, 209, 1) 0%, rgba(33, 139, 181, 1) 80%, rgba(63, 160, 217, 1) 100%);
    margin: 0;
    min-height: 100vh;
}

.contain {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    position: absolute;
}

.main {
    position: relative;
    width: 150px;
    height: 150px;
    margin: 0 auto;
    overflow: visible;
    transition: all cubic-bezier(0.4, 0.25, 0.14, 1.5);
    transition-duration: 1s;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transform-origin: center center 75px;
    animation: rotator 5s linear infinite;
}

@keyframes rotator {
    from {
        transform: rotateY(360deg) rotateZ(360deg) rotateX(360deg);
    }

    to {
        transform: rotateY(0deg) rotateZ(0deg) rotateX(0deg);
    }
}

.top,
.right,
.left,
.bottom,
.lid,
.front{
    position: absolute;
    width: 150px;
    height: 150px;
    z-index: 999;
    transition: all 1s ease;
    border: 4px solid #fff;
    
    filter: blur(calc(10px - (var(--mess)  ) * .133px));
}

.top {
    top: calc(-150px + var(--mess) * 2.5px);
    transform-origin: 50% 100%;
    transform: rotateX(-90deg);
}

.bottom {
    bottom: calc(-150px + var(--mess) * 2.5px);
    transform-origin: 100% 0%;
    transform: rotateX(90deg);
}

.left {
    left: calc(-150px + var(--mess) * 2.5px);
    transform-origin: 100% 0%;
    transform: rotateY(90deg);
}

.right {
    right: calc(-150px + var(--mess) * 2.5px);
    transform-origin: 0% 0%;
    transform: rotateY(-90deg);
}

.lid {
    transform-origin: 0% 0%;
    transform: translateZ(calc(150px - var(--mess) * 2.5px));
    border: 4px solid #fff;
}

.front {

    transform-origin: 0% 0%;
    transform: translateZ(calc(0px + var(--mess) * 2.5px));
    border: 4px solid #fff;
}