@property --k {
  syntax: "<number>";
  initial-value: 0;
  inherits: true;
}
html, body, div {
  display: grid;
}

html {
  height: 100%;
}

body {
  perspective: 65em;
  background: #212;
}

.gallery {
  place-self: center;
  transform-style: preserve-3d;
  animation: a 16s linear infinite;
  animation-name: ry, k;
}

@keyframes k {
  to {
    --k: 1 ;
  }
}
@keyframes ry {
  to {
    rotate: y 1turn;
  }
}
img {
  --d: 7vmin;
  --r: 6*var(--d);
  --j: (var(--i)/var(--n) + var(--k));
  --ca: var(--j)*1turn;
  grid-area: 1/1;
  width: var(--d);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  translate: calc(var(--r)*sin(var(--ca))*pow(sin(.5*var(--ca)), 4)) calc(-1*var(--r)*cos(var(--ca))) calc(.25*var(--r)*sin(var(--ca)));
  scale: calc(1 - 1.75*abs(mod(var(--j), 1) - .5));
  box-shadow: 2px 2px 5px;
  animation: inherit;
  animation-direction: reverse, normal;
}