.iceCubeBox {
    border: 10px solid transparent;
}

.iceCube {
    position: relative;
    width: 300px;
    height: 300px;
    transform-style: preserve-3d;
    transform: rotateX(-30deg) rotateY(-30deg);
    margin: 70px auto;
    animation: cubeIce 7s linear infinite;
}
/*.iceCube:hover {
        animation: cubeIce 4s linear infinite;
    }*/
@keyframes cubeIce {
    0% {
        transform: rotateX(-30deg) rotateY(0deg);
    }
    /* 50% {
        transform: rotateX(30deg) rotateY(70deg);
    }*/

    100% {
        transform: rotateX(-30deg) rotateY(360deg);
    }
}

.iceCube div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    z-index: 0;
}

    .iceCube div span {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(#222, #fff);
        transform: rotateY(calc(90deg * var(--i))) translateZ(150px);
        opacity: 0.5;
    }

.iceCubeBall {
    border-radius: 50%;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

    .iceCubeBall img {
        max-width: 300px;
        max-height: 300px;
    }

.iceCubeTop {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 300px;
    background: #fff;
    transform: rotateX(90deg) translateZ(150px);
    opacity: 0.5;
}
/*.iceCubeTop::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 200px;
        height: 200px;
        background: #000;
        transform: translateZ(-380px);
        filter: blur(20px);
        box-shadow: 0 0 120px rgb(0,0,0,0.2), 0 0 200px rgb(0,0,0,1.4), 0 0 300px rgb(0,0,0,0.6), 0 0 400px rgb(0,0,0,0.8), 0 0 500px rgb(0,0,0,1);
    }*/
.iceCubeBottom {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 300px;
    background: #fff;
    transform: rotateX(90deg) translateZ(-150px);
    opacity: 0.5;
}

    .iceCubeBottom::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 300px;
        height: 300px;
        background: #000;
        transform: translateZ(-380px);
        filter: blur(20px);
        box-shadow: 0 0 120px rgb(255,255,255,0.2), 0 0 200px rgb(255,255,255,1.4), 0 0 300px rgb(255,255,255,0.6), 0 0 400px rgb(255,255,255,0.8), 0 0 500px rgb(255,255,255,1);
    }