3D extruded tilt

<!--
  ============================================================
  SVGarden — https://www.svgarden.dev
  Author : Simon-Pierre Boucher
  Contact: contact@spboucher.ai
  File   : snippets/text-fx/text-shadow-3d-tilt.html
  Desc   : Extruded pseudo-3D text that tilts in perspective on hover
  ============================================================
-->
<div class="sg-text-shadow-3d-tilt" tabindex="0" aria-label="DEPTH" style="--sg-color:#7F77DD; --sg-size:54px; --sg-depth:1.4px;">
  <span class="sg-text-shadow-3d-tilt-stack">
    <span class="sg-text-shadow-3d-tilt-layer" style="--sg-i:5" aria-hidden="true">DEPTH</span>
    <span class="sg-text-shadow-3d-tilt-layer" style="--sg-i:4" aria-hidden="true">DEPTH</span>
    <span class="sg-text-shadow-3d-tilt-layer" style="--sg-i:3" aria-hidden="true">DEPTH</span>
    <span class="sg-text-shadow-3d-tilt-layer" style="--sg-i:2" aria-hidden="true">DEPTH</span>
    <span class="sg-text-shadow-3d-tilt-layer" style="--sg-i:1" aria-hidden="true">DEPTH</span>
    <span class="sg-text-shadow-3d-tilt-layer" style="--sg-i:0" aria-hidden="true">DEPTH</span>
  </span>
</div>
<style>
  .sg-text-shadow-3d-tilt {
    display: inline-block;
    perspective: 550px;
    cursor: default;
  }
  .sg-text-shadow-3d-tilt-stack {
    display: grid;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: var(--sg-size);
    font-weight: 800;
    letter-spacing: 0.03em;
    line-height: 1.1;
    transition: transform 0.45s ease;
  }
  .sg-text-shadow-3d-tilt-layer {
    grid-area: 1 / 1;
    color: var(--sg-color);
    translate: calc(var(--sg-i) * var(--sg-depth)) calc(var(--sg-i) * var(--sg-depth));
    filter: brightness(calc(1 - var(--sg-i) * 0.13));
  }
  .sg-text-shadow-3d-tilt:hover .sg-text-shadow-3d-tilt-stack,
  .sg-text-shadow-3d-tilt:focus-visible .sg-text-shadow-3d-tilt-stack {
    transform: rotateX(18deg) rotateY(-14deg);
  }
</style>