/* Image box */
.imageBox {
    /* Image size */
	width: 180px;
	height: 180px;
    /* Extra details */
    position: relative;
	transform-style: preserve-3d; /* 3D effect */
}

/* Each layer image */
.layerImage {
    /* Position */
    width: 100%;
	height: 100%;
    top: 110px;
    left: 90px;
    z-index: var(--imageLayer);
    /* Extra details */
    content: url("../img/image.jpg");
	position: absolute;
    object-fit: cover;
    opacity: calc(1 - (0.2 * var(--imageNum)));
	animation: animateLayerImage 4s ease infinite; /* Repeat animation, slower at the start and end, all the time */
}

/* Layer the image with a 3D effect */
@keyframes animateLayerImage {
    50% {
        transform: rotate(-30deg) skew(25deg) translateX(calc(21px * var(--imageLayer))) translateY(calc(-21px * var(--imageLayer))) scale(0.9); /* Layering calculation */
	    box-shadow: -20px 20px 20px rgba(0,0,0,0.25); /* Shadow detail between layers */
    }
}