Слои в глубину

<div class="card3d">
  <div class="inner">
    <i class="bg"></i>                       <!-- z: 0 -->
    <em class="tag">тег</em>                 <!-- z: 46px -->
    <b class="title">Заголовок</b>           <!-- z: 70px -->
  </div>
</div>

<style>
.card3d { perspective: 900px; }
.inner { position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;              /* слои живут в 3D */
  transition: transform .5s cubic-bezier(.16,1,.3,1); }
.bg    { position: absolute; inset: 0; transform: translateZ(0); }
.tag   { position: absolute; transform: translateZ(46px); }
.title { position: absolute; transform: translateZ(70px); }
</style>

<script>
// наклон за курсором — как в «3D-наклоне», но слои
// с translateZ смещаются на разную величину = параллакс глубины
card.addEventListener("pointermove", function (e) {
  var nx = /* -0.5..0.5 */, ny = /* -0.5..0.5 */;
  inner.style.transform =
    "rotateX(" + (-ny * 14) + "deg) rotateY(" + (nx * 14) + "deg)";
});
</script>

Сделай многослойную 3D-карточку: контейнер с perspective:900px, внутренний блок с transform-style:preserve-3d наклоняется за курсором (rotateX/Y ±14°, без transition при движении, пружинный возврат 0.5s). Слои контента — фото на translateZ(0), тег на 46px, заголовок на 70px: при наклоне слои смещаются по-разному, возникает объём. Тень на фоновом слое. Тачам — статика.