.cubes .cube {
    position: absolute;
    height: 100px;
    width: 100px;
    margin: 0;
    animation: cube-fade-in 2s cubic-bezier(0.165, 0.84, 0.44, 1);
    will-change: transform;
}
@keyframes cube-fade-in {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
}
.cubes .cube * {
    position: absolute;
    height: 100%;
    width: 100%;
}
.cubes .cube .shadow {
    background: #07427a;
    top: 40%;
}
.cubes .cube .sides {
    transform-style: preserve-3d;
    perspective: 600px;
}
.cubes .cube .sides div {
    backface-visibility: hidden;
    will-change: transform;
}
.cubes .cube .sides .front {
    transform: rotateY(0deg) translateZ(50px);
}
.cubes .cube .sides .back {
    transform: rotateY(-180deg) translateZ(50px);
}
.cubes .cube .sides .left {
    transform: rotateY(-90deg) translateZ(50px);
}
.cubes .cube .sides .right {
    transform: rotateY(90deg) translateZ(50px);
}
.cubes .cube .sides .top {
    transform: rotateX(90deg) translateZ(50px);
}
.cubes .cube .sides .bottom {
    transform: rotateX(-90deg) translateZ(50px);
}