Голографическая карточка

<div class="holo">
  <div class="inner" style="background-image:url(art.jpg)">
    <i class="foil"></i>
    <i class="glare"></i>
  </div>
</div>

<style>
.holo { perspective: 900px; }
.inner { transform-style: preserve-3d; overflow: hidden;
  transition: transform .5s cubic-bezier(.16,1,.3,1); }
/* фольга: радужные полосы + блик, смешение color-dodge */
.foil { position: absolute; inset: 0;
  mix-blend-mode: color-dodge; opacity: .55;
  background:
    repeating-linear-gradient(115deg,
      rgba(255,0,132,.35) 0 12px,  rgba(0,255,255,.35) 12px 24px,
      rgba(255,220,0,.35) 24px 36px, rgba(0,89,255,.35) 36px 48px),
    radial-gradient(farthest-corner at var(--hx,50%) var(--hy,50%),
      rgba(255,255,255,.7), transparent 42%);
  background-position: calc(var(--hx,50%) * 1.6) 50%, 0 0; }
.glare { position: absolute; inset: 0; mix-blend-mode: overlay;
  background: radial-gradient(farthest-corner at var(--hx,50%)
    var(--hy,50%), rgba(255,255,255,.9), transparent 38%); }
</style>

<script>
// курсор пишет --hx/--hy (0-100%) + наклон rotateX/Y ±18°
card.addEventListener("pointermove", function (e) {
  var nx = /* 0..1 */, ny = /* 0..1 */;
  inner.style.transform = "rotateX(" + (.5 - ny) * 18 +
    "deg) rotateY(" + (nx - .5) * 18 + "deg)";
  inner.style.setProperty("--hx", nx * 100 + "%");
  inner.style.setProperty("--hy", ny * 100 + "%");
});
</script>

Сделай голографическую карточку (Pokemon-holo, приём CSS-Tricks): карточка наклоняется за курсором (rotateX/Y ±18°, perspective 900px); поверх фото два слоя: «фольга» — repeating-linear-gradient радужных полос (magenta/cyan/gold/blue по 12px) с mix-blend-mode: color-dodge, чья background-position сдвигается от --hx курсора, плюс radial-блик в точке курсора с blend overlay. Радуга «переливается» при наклоне. На выходе курсора — пружинный возврат. Тачам — статика.