3Dカルーセルは、GSAPで動く立体カルーセルを6タイプ（メリーゴーランド・縦回転・カードスタック・フラワー・キューブ・観覧車）作れる無料ツールです。タイプを選び、枚数・半径・遠近・傾き・速度・色をスライダーで調整して、ドラッグやスワイプで操作できるHTML/CSS/JS（完全版・GSAP CDN込み）を生成できます。
使い方（3ステップ）
- タイプを選ぶ：テンプレートから6タイプのうち近いものをクリック（プレビューが切り替わります）
- 調整する：枚数・半径・遠近・傾き・速度・色などをスライダーで調整。プレビューはドラッグで回せます
- コードをコピー＆画像に差し替え：生成コード（完全版）をコピーして貼り付け、各カードの中身を自分の画像に差し替え
6タイプの早見表
| タイプ | 動き | 向いている用途 |
|---|---|---|
| メリーゴーランド | カードが横の輪になって回転（前後・横の傾きも調整可） | 写真・商品ギャラリー |
| 縦回転 | 観覧車のように縦の輪で回転 | 縦長カード・特集 |
| カードスタック | 次のカードが下からせり上がり、現カードは奥へ後退して切替（自動送り＋スワイプ） | ストーリー・順送りスライド |
| フラワー | 放射状に並べ、見下ろし角で回転（花・万華鏡風） | ビジュアル・装飾・ヒーロー |
| キューブ | 6面（前後左右＋天面・底面）の立方体が回転 | ギャラリー・切替展示 |
| 観覧車 | 円周を回るが、カードは常に正面・正立（ゴンドラ） | サムネ一覧・回遊 |
設定項目 早見表
タイプによって表示されるスライダーは変わります。主な項目は次のとおりです。
| 項目 | 役割 |
|---|---|
| count | カードの枚数 |
| radius | 輪の半径（大きいほどカードが離れる） |
| size | 立方体の一辺の大きさ（キューブ） |
| perspective | 遠近の強さ（小さいほど奥行きが強調される） |
| cardW / cardH | カードの幅・高さ（px） |
| 前後tilt / 横tilt | メリーゴーランドの傾き（前後＝手前に倒す、横＝左右に傾ける） |
| 見下ろし | 上から見下ろす角度（フラワー・キューブ・観覧車） |
| interval | 自動送りの間隔（秒・カードスタック） |
| depth | 後退の深さ（カードスタック） |
| speed | 1回転にかかる秒数（小さいほど速い）。自動回転OFFで静止 |
| hue | カードの色相（0〜360°） |
カードを画像に差し替える
- リング系（メリーゴーランド・縦回転・フラワー・キューブ・観覧車）：各
.c3-cardの中の<span>1</span>を<img src="photo1.jpg" alt="">に置き換える - カードスタック：各
.cs-cardの.cs-imgを画像に、.cs-textの見出し・説明を編集する - 画像は CSS で
object-fit: cover済みなのでカードいっぱいに表示されます。枚数を変えるときはcountを調整し、その枚数ぶんのカードを用意します
操作とコード
- ドラッグ／スワイプ：回転系はドラッグして離すと慣性で回ります。カードスタックはスワイプ／タップで前後送り
- 自動回転 / 自動送り：ボタンでON/OFF。OFFは静止＋手動操作のみ（生成コードにも反映）
- 生成コードは完全版のみ：GSAP・Draggable（回転系は InertiaPlugin も）の読み込みを含む自己完結スニペット。コピペだけで動きます
よくある質問
どんな3Dカルーセルが作れますか？
6タイプを作れます。メリーゴーランド（横回転の輪）、縦回転（縦の輪）、カードスタック（下からせり上がって奥へ後退）、フラワー（放射状に並べて見下ろし回転）、キューブ（6面の立方体）、観覧車（円周を回るがカードは常に正面）です。いずれも自動回転とドラッグ操作つきです。
出力したコードはそのまま動きますか？
はい。生成コードは GSAP（および Draggable・InertiaPlugin）の読み込みまで含む自己完結スニペット（完全版）なので、HTMLに貼り付けるだけで動きます。
カードの中身を画像に差し替えるには？
リング系は各 .c3-card の中の <span> を <img> に置き換えます。カードスタックは .cs-img を画像に、.cs-text を見出しに差し替えます。画像は object-fit: cover でカードいっぱいに表示されます。
自動回転・自動送りは止められますか？
はい。「自動回転 / 自動送り」のON/OFFボタンで切り替えられます。OFFにすると静止し、ドラッグ（またはスワイプ）した分だけ動きます。生成コードにも設定が反映されます。
ドラッグやスワイプで操作できますか？
はい。GSAP の Draggable を使っており、回転系はドラッグして離すと慣性で回り続けます（InertiaPlugin）。カードスタックはスワイプ／タップで前後に送れます。
どのタイプを選べばいいですか？
写真・商品ギャラリーはメリーゴーランドや観覧車、ストーリー風の順送りはカードスタック、装飾・ヒーローはフラワーやキューブが向いています。まずは近いタイプを選び、半径・枚数・見下ろし角で雰囲気を調整してください。
GSAPは無料ですか？商用利用できますか？
はい。GSAP は現在すべての公式プラグイン（Draggable・InertiaPlugin を含む）が無料で、商用サイトでも利用できます。生成されるカルーセル側のコードも自由に利用できます。