Perspective highlight

Highlighted text that lifts off the page on hover using CSS perspective and transform, from this article.

html #ui#animation
<style>
  body {
    margin: 0;
    display: grid;
    place-items: center;
    min-height: 100vh;
    background: white;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }

  .perspective-container {
    perspective: 1100px;
    padding: 48px;
  }

  .perspective-distant {
    transform-style: preserve-3d;
  }

  .perspective-card {
    width: 530px;
    font-size: 20px;
    line-height: 1.6;
    text-wrap: pretty;
    color: #9aa5b8;
    transform: rotateX(0deg) rotateY(0deg);
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
  }

  .perspective-container:hover .perspective-card {
    transform: rotateX(14deg) rotateY(-28deg);
  }

  .perspective-card span {
    display: block;
    background: rgba(160, 200, 255, 0.75);
    color: white;
    font-style: italic;
    border-radius: 6px;
    padding: 2px 7px;
    display: inline-block;
    transition:
      transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
      box-shadow 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 0.3s;
  }

  .perspective-container:hover .perspective-card span {
    transform: translate(-7px, -6px);
    box-shadow:
      rgba(120, 170, 255, 0.9) 2px 1.5px 0px 0.5px,
      rgba(120, 170, 255, 0.3) 8px 5px 10px 0px;
  }
</style>

<div class="perspective-container">
  <div class="perspective-distant">
    <div class="perspective-card">
      I have never been overconcerned or obsessed with opinion polls or
      popularity polls. I think a leader who is, is a weak leader.
      <span>If you are concerned with whether your rating will go up or</span>
      <span>down, then you are not a leader.</span> You are just catching the
      wind.
    </div>
  </div>
</div>