前端嘛

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>3D 卡片悬浮</title>
    <style>
      :root {
        --card-height: 300px;
        --card-width: calc(var(--card-height) / 1.5);
      }
      * {
        box-sizing: border-box;
      }
      body {
        width: 100vw;
        height: 100vh;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #191c29;
      }
      .card {
        width: var(--card-width);
        height: var(--card-height);
        position: relative;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        padding: 0 36px;
        perspective: 2500px;
        margin: 0 50px;
      }

      .cover-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .wrapper {
        transition: all 0.5s;
        position: absolute;
        width: 100%;
        z-index: -1;
      }

      .card:hover .wrapper {
        transform: perspective(900px) translateY(-5%) rotateX(25deg)
          translateZ(0);
        box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
        -webkit-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
        -moz-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
      }

      .wrapper::before,
      .wrapper::after {
        content: '';
        opacity: 0;
        width: 100%;
        height: 80px;
        transition: all 0.5s;
        position: absolute;
        left: 0;
      }
      .wrapper::before {
        top: 0;
        height: 100%;
        background-image: linear-gradient(
          to top,
          transparent 46%,
          rgba(12, 13, 19, 0.5) 68%,
          rgba(12, 13, 19) 97%
        );
      }
      .wrapper::after {
        bottom: 0;
        opacity: 1;
        background-image: linear-gradient(
          to bottom,
          transparent 46%,
          rgba(12, 13, 19, 0.5) 68%,
          rgba(12, 13, 19) 97%
        );
      }

      .card:hover .wrapper::before,
      .wrapper::after {
        opacity: 1;
      }

      .card:hover .wrapper::after {
        height: 120px;
      }
      .title {
        width: 100%;
        transition: transform 0.5s;
      }
      .card:hover .title {
        transform: translate3d(0%, -50px, 100px);
      }

      .character {
        width: 100%;
        opacity: 0;
        transition: all 0.5s;
        position: absolute;
        z-index: -1;
      }

      .card:hover .character {
        opacity: 1;
        transform: translate3d(0%, -30%, 100px);
      }
    </style>
  </head>
  <body>
    <div class="card">
      <div class="wrapper">
        <img
          src="	https://fecoder-pic-1302080640.cos.ap-nanjing.myqcloud.com/dark_rider-cover.jpg"
          class="cover-image"
        />
      </div>
      <img
        src="	https://fecoder-pic-1302080640.cos.ap-nanjing.myqcloud.com/dark_rider-title.png"
        class="title"
      />
      <img
        src="	https://fecoder-pic-1302080640.cos.ap-nanjing.myqcloud.com/dark_rider-character.webp"
        class="character"
      />
    </div>

    <div class="card">
      <div class="wrapper">
        <img
          src="	https://fecoder-pic-1302080640.cos.ap-nanjing.myqcloud.com/force_mage-cover.jpg"
          class="cover-image"
        />
      </div>
      <img
        src="	https://fecoder-pic-1302080640.cos.ap-nanjing.myqcloud.com/force_mage-title.png"
        class="title"
      />
      <img
        src="	https://fecoder-pic-1302080640.cos.ap-nanjing.myqcloud.com/force_mage-character.webp"
        class="character"
      />
    </div>
  </body>
</html>