FLIP-раскрытие

Карточка плавно вырастает в фуллскрин ровно из своего места — техника FLIP.

Кликните карточку.

клик — раскрыть

и этот тоже

Код

<div class="card" data-expand style="background-image:url(a.jpg)"></div>
<div class="overlay"><button class="close">×</button></div>

<script>
// FLIP-раскрытие: клон летит из позиции карточки в фуллскрин
var ghost = null, src = null;
document.querySelectorAll("[data-expand]").forEach(function (card) {
  card.addEventListener("click", function () {
    src = card;
    var r = card.getBoundingClientRect();       // FIRST
    ghost = document.createElement("div");
    ghost.className = "ghost";
    ghost.style.cssText = "left:" + r.left + "px;top:" + r.top +
      "px;width:" + r.width + "px;height:" + r.height +
      "px;background-image:" + getComputedStyle(card).backgroundImage;
    document.body.appendChild(ghost);
    card.style.opacity = 0;
    requestAnimationFrame(function () { requestAnimationFrame(function () {
      ghost.style.left = "4vw"; ghost.style.top = "6vh";   // LAST
      ghost.style.width = "92vw"; ghost.style.height = "88vh";
    }); });
  });
});
// закрытие: те же координаты обратно, потом remove
</script>

<style>
.ghost { position: fixed; z-index: 96; border-radius: 16px;
  background-size: cover;
  transition: all .55s cubic-bezier(.16,1,.3,1); }  /* PLAY */
</style>

Промпт для ИИ

Сделай FLIP-раскрытие карточки в фуллскрин: по клику измеряй getBoundingClientRect карточки (First), создавай fixed-клон с теми же координатами и фоном, оригинал прячь; через двойной requestAnimationFrame задавай клону финальные координаты (4vw/6vh, 92vw/88vh) — transition 0.55s cubic-bezier(0.16,1,0.3,1) анимирует полёт (Last→Play). Затемняющий оверлей отдельно. Закрытие — обратно в текущий rect оригинала (пересчитай, страница могла проскроллиться), потом удалить клон.