플립 기법

<div class="items" id="items">
  <div class="item i1">1</div>
  <div class="item i2">2</div>
  <div class="item i3">3</div>
  <div class="item i4">4</div>
</div>

.items{position:absolute;inset:24% 10%;display:flex;gap:4%;align-items:flex-start}
.item{flex:1;aspect-ratio:1;border-radius:10px;display:grid;place-items:center;color:#fff;font:700 clamp(14px,4vmin,22px)/1 sans-serif}
.i1{background:var(--accent)}.i2{background:var(--accent-2)}.i3{background:var(--accent-3)}.i4{background:var(--accent)}

const box = document.getElementById('items');
const items = [...box.children];
let alt = false;
function flip(mutate) {
  const first = items.map((el) => el.getBoundingClientRect());
  mutate();
  const last = items.map((el) => el.getBoundingClientRect());
  items.forEach((el, i) => {
    const dx = first[i].left - last[i].left;
    const dy = first[i].top - last[i].top;
    if (dx || dy) {
      el.style.transition = 'none';
      el.style.transform = 'translate(' + dx + 'px, ' + dy + 'px)';
      requestAnimationFrame(() => {
        el.style.transition = 'transform .5s cubic-bezier(.2,.8,.2,1)';
        el.style.transform = '';
      });
    }
  });
}
function shuffle() {
  alt = !alt;
  const order = alt ? [3, 1, 2, 0] : [0, 1, 2, 3];
  flip(() => order.forEach((i) => box.appendChild(items[i])));
}
setInterval(shuffle, 2400);