CSSだけで視差効果のある立体的な回転カードを作る

<div class="container">
  <div class="card">
    <div class="front">
      <div class="thumb"><img src="https://yutsuzo.com/wp-content/uploads/2025/03/css-subgrid-card-alignment-01.jpg" width="640" height="336"></div>
      <div class="inner">
        <h2>森の静寂と<br>鳥のさえずり</h2>
      </div>
    </div>
    <div class="back">
      <div class="inner">
        <p>静かな森の中で、鳥のさえずりと木々のざわめきを聞きながら心を落ち着かせる時間は、日々の喧騒を忘れさせてくれる。</p>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="front">
      <div class="thumb"><img src="https://yutsuzo.com/wp-content/uploads/2025/03/css-subgrid-card-alignment-02.jpg" width="640" height="336"></div>
      <div class="inner">
        <h2>青空と流れる雲</h2>
      </div>
    </div>
    <div class="back">
      <div class="inner">
        <p>どこまでも広がる青空に浮かぶ雲を眺めながら、ゆっくりと流れる時間に身を委ねる。</p>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="front">
      <div class="thumb"><img src="https://yutsuzo.com/wp-content/uploads/2025/03/css-subgrid-card-alignment-03.jpg" width="640" height="336"></div>
      <div class="inner">
        <h2>滝のせせらぎと<br>清らかな流れ</h2>
      </div>
    </div>
    <div class="back">
      <div class="inner">
        <p>清らかな水が岩を伝って流れ落ちる滝の音に耳を傾けると、大自然の力強さと癒しを同時に感じることができる。</p>
      </div>
    </div>
  </div>
</div>

body {
  padding: 30px 15px;
  font-family: serif;
  background: #666;
}

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-inline: auto;
  max-width: 900px;
}

.card {
  --rotate-deg: 0deg;

  container-type: inline-size;
  position: relative;
  aspect-ratio: 1 / 1;
  color: #FFFFFF;

  &:hover {
    --rotate-deg: -180deg;
  }

  *,:before {
    backface-visibility: hidden;
    perspective: 1000px;
    transform-style: preserve-3d;
    transition: transform 0.5s;
  }

  .front {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;

    .thumb {
      position: absolute;
      inset: 0;
      transform: rotateY(var(--rotate-deg));

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

    .inner {
      padding: 10%;
      transform: rotateY(var(--rotate-deg)) translateZ(50px) scale(0.95);
      text-shadow: 0 0 4px #000;

      h2 {
        text-align: center;
        font-size: 10cqw;
      }
    }
  }

  .back {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;

    &:before {
      content: '';
      position: absolute;
      inset: 0;
      background: #333;
      transform: rotateY(calc(var(--rotate-deg) - 180deg));
    }

    .inner {
      padding: 10%;
      transform: rotateY(calc(var(--rotate-deg) - 180deg)) translateZ(50px) scale(0.95);
      text-shadow: 0 0 4px #000;
      
      p {
        font-size: 6cqw;
      }
    }
  }
}