body {
    margin: 0;
    height: calc(var(--vh, 1vh) * 100);
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f5f5f5;
}

img {
    max-width: 60vw;
    max-height: 60vh;
    transition: transform 1s;
    transform-style: preserve-3d;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    /* soft shadow under image */

}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.spin {
    animation: spin 4s linear infinite;
}

@keyframes spinZ {
    from {
        transform: rotateZ(0deg);
    }

    to {
        transform: rotateZ(360deg);
    }
}

/* Spins around X axis */
@keyframes spinX {
    from {
        transform: rotateX(0deg);
    }

    to {
        transform: rotateX(360deg);
    }
}

/* Spins around Y axis */
@keyframes spinY {
    from {
        transform: rotateY(0deg);
    }

    to {
        transform: rotateY(360deg);
    }
}

.spinZ {
    animation: spinZ 2s linear infinite;
}

.spinX {
    animation: spinX 2s linear infinite;
}

.spinY {
    animation: spinY 2s linear infinite;
}