<div class="scrollable">
  <!-- --card-countにカード枚数を記述してください -->
  <ul class="cardList" style="--card-count: 12">
    <li class="sampleCard" style="--index: 0">
      <div class="face front">
        <p>Card</p>
      </div>
      <div class="face back">
        <p>Back</p>
      </div>
    </li>
    <li class="sampleCard" style="--index: 1">
      <div class="face front">
        <p>Card</p>
      </div>
      <div class="face back">
        <p>Back</p>
      </div>
    </li>
    <!-- 中略 -->
    <li class="sampleCard" style="--index: 11">
      <div class="face front">
        <p>Card</p>
      </div>
      <div class="face back">
        <p>Back</p>
      </div>
    </li>
  </ul>
</div>

.scrollable {
  width: 100%;
  height: 300px;
}

.cardList {
  --base-deg: 0; /* 円周の回転角度（度） */

  position: relative;
  width: 100%;
  height: 100%;
  pointer-events: none; /* カード要素へのインタラクションを有効化するため、ラッパー要素はインタラクションが透過するよう設定 */
  transform-style: preserve-3d;
  perspective: 500px;
}

.sampleCard {
  /* 実際に配置する大きさなどに応じて適宜変更してください */
  --r: 450px; /* 円周の半径 */
  --z-offset: 600px; /* 円周の奥行き方向の距離 */
  --rotate-deg: calc(
    360 / var(--card-count)
  ); /* 個別のカードの回転角度（度） */

  position: fixed;
  top: 0;
  left: calc(50% - 100px); /* 50%の位置からカードの横幅の半分で中央寄せにする */
  list-style: none;
  transform-style: preserve-3d;

  .face {
    position: absolute;
    backface-visibility: hidden;
    pointer-events: auto; /* カード要素へのインタラクションを有効化する */
  }
  .front {
    rotate: 0 1 0
      calc((var(--base-deg) + (var(--index) * var(--rotate-deg))) * 1deg);
    translate: calc(
        sin(calc((var(--base-deg) + (var(--index) * var(--rotate-deg))) * 1deg)) *
          var(--r)
      )
      0
      calc(
        cos(calc((var(--base-deg) + (var(--index) * var(--rotate-deg))) * 1deg)) *
          var(--r) - var(--z-offset)
      );
  }

  .back {
    rotate: 0 1 0
      calc(
        ((var(--base-deg) + (var(--index) * var(--rotate-deg)) + 180)) * 1deg
      );
    translate: calc(
        sin(calc((var(--base-deg) + (var(--index) * var(--rotate-deg))) * 1deg)) *
          var(--r)
      )
      0
      calc(
        cos(calc((var(--base-deg) + (var(--index) * var(--rotate-deg))) * 1deg)) *
          var(--r) - var(--z-offset)
      );
  }

  /* フリップ時 */
  &.isActive {
    .front {
      rotate: 0 1 0
        calc(
          (var(--base-deg) + (var(--index) * var(--rotate-deg)) + 179.9) * 1deg
        );
    }
    .back {
      rotate: 0 1 0
        calc(
          (var(--base-deg) + (var(--index) * var(--rotate-deg)) + 359.9) * 1deg
        );
    }
  }
}

/* フリップ時（スクロールしていない時）のみトランジションを有効化 */
.lenis:not(.lenis-scrolling) .face {
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  transition: rotate 0.8s var(--ease-out-quart);
}

import Lenis from "lenis";

const wrapperElement = document.querySelector(".scrollable");
const cardListElement = document.querySelector(".cardList");
const cardItemElement = document.querySelectorAll(".sampleCard");

// Lenisの設定
const lenis = new Lenis({
  autoRaf: true,
  wrapper: wrapperElement,
  wheelMultiplier: 0.3,
  touchMultiplier: 0.5,
  syncTouchLerp: 0.01,
  syncTouch: true,
  gestureOrientation: "both",
  infinite: true,
});
// 初期回転角度を設定
const baseDeg = 0;
cardListElement.style.setProperty("--base-deg", `${baseDeg}`);

// スクロール加速度の回転への係数
const STRENGTH = 0.3;

// Lenisでスクロールイベントをリッスン
lenis.on("scroll", (event) => {
  const currentDeg = cardListElement.style.getPropertyValue("--base-deg");
  // 現在の回転角度にスクロール速度を加算
  const newbaseDeg = currentDeg - event.velocity * STRENGTH;
  cardListElement.style.setProperty("--base-deg", `${newbaseDeg}`);
});

// カードをクリックするとアクティブにする
cardItemElement.forEach((element) => {
  element.addEventListener("click", () => {
    if (lenis.isScrolling) {
      // スクロール中はアクティブにしない
      return;
    }
    element.classList.toggle("isActive");
  });
});