3Dカルーセル ジェネレーターとは、メリーゴーランドや観覧車のように立体的に回転するカルーセルを画面上で設定するだけで、コピペできるコード（GSAPの読み込み＋HTML＋CSS＋初期化JS）を出力してくれる無料ツールです。枚数・半径・遠近・傾き・速度・色を、コードを書かずに調整できます。
3Dで回るカルーセルは見栄えがする一方、自前で作ろうとすると手が止まります。perspectiveとtransform-style: preserve-3dで奥行きを作り、各カードをrotateYとtranslateZでリング状に並べ、さらにドラッグで慣性をつけて回す——という三段構えを、角度計算をしながら自分で書く必要があるからです。タイプを「観覧車」や「カードスタック」に変えようとすると、配置のロジックそのものを書き直すことになります。
この記事では、CodeQuestが公開している3Dカルーセル ジェネレーターの使い方を解説します。6つの3Dタイプの選び方、枚数や半径などのパラメータ調整、出力されるGSAP込みコードの構成、画像の差し替えまでを、実際の操作に沿って紹介します。ブラウザだけで完結し、登録は不要、生成したコードは商用サイトでもそのまま使えます。
このツールでできること
3Dカルーセル ジェネレーターは、角度計算やGSAPの記法を覚えなくても、動く3Dカルーセルのコードを手に入れることに特化しています。主な機能は次のとおりです。
| 機能 | 内容 |
|---|---|
| 6つの3Dタイプ | メリーゴーランド／縦回転／カードスタック／フラワー／キューブ／観覧車をテンプレートから切り替え |
| パラメータ調整 | 枚数・半径・遠近（perspective）・傾き・速度・色をスライダーで設定し、プレビューに即反映 |
| ドラッグで回せるプレビュー | マウスやタッチでつかんで回せる。慣性がついて、離してもしばらく回り続ける |
| ダーク／ライト切り替え | 背景を切り替えて、明暗どちらの面でも見え方を確認できる |
| GSAP込みのコピペ出力 | GSAPのCDN読み込み＋HTML＋CSS＋初期化JSを、自己完結した完全版コードとして出力 |
| 画像の差し替え前提 | サンプル入りの完成コードが出るので、画像URLを差し替えればそのまま動く |
画像やデータをサーバーに送信せず、すべてブラウザ内で処理します。アニメーションエンジンにはGSAPを使っており、GSAPは商用サイトでも無料で利用できます（公式サイトは gsap.com）。
6つの3Dタイプと使いどころ
このツールの特徴は、同じ画像のまま6つの3Dの回り方を切り替えて比較できる点です。タイプによって与える印象も向いている用途も変わります。まずはどれを選ぶかの目安から整理します。
| タイプ | 動き | 向いている用途 |
|---|---|---|
| メリーゴーランド | 水平のリング状に並んで横回転する、もっとも定番の3Dカルーセル | 商品展示・ポートフォリオ一覧 |
| 縦回転 | 縦方向の輪で上下に回る | 縦長カード・スマホ向けの見せ方 |
| カードスタック | 重なったカードを手前から奥へ送る | レビュー・実績の一枚ずつの紹介 |
| フラワー | 中心から花びらのように放射状に広がって回る | ギャラリーの主役・インパクト重視 |
| キューブ | 立方体の面が回転して切り替わる | 少数枚を印象的に見せたいとき |
| 観覧車 | 大きな輪で各カードの向きを保ったまま回る | 写真ギャラリー・物語性のある演出 |
迷ったら、まずはメリーゴーランドから試すのがおすすめです。3Dカルーセルとして見慣れた動きで、枚数や半径を変えたときの変化が直感的につかめます。インパクトを出したいセクションにはフラワーや観覧車、少数枚をきっちり見せたいならキューブ、という選び方になります。
使い方：3ステップでコードを作る
操作はおおきく3ステップです。難しい設定はありません。
- タイプを選ぶ： テンプレートからメリーゴーランド・観覧車などのタイプを選びます。あとから切り替えても設定は引き継がれるので、同じ条件で見比べながら決められます。
- パラメータを調整する： 枚数・半径・遠近・傾き・速度・色を、プレビューを見ながらスライダーで動かします。プレビューはドラッグで実際に回せるので、止めたい位置やスピード感をその場で確かめられます。
- コードをコピーする： 生成された「GSAP CDN込み・完全版」のコードをコピーボタンで取得し、貼り付けます。読み込み・HTML・CSS・初期化スクリプトがひと続きになっているので、画像のURLを差し替えるだけで動きます。
ダーク／ライトの切り替えで、配置するページの背景に近いほうでも確認しておくと、本番に貼ったときの印象のズレを減らせます。
調整できるパラメータ一覧
各パラメータは、3Dカルーセルの見え方をコントロールするためのものです。動かすとプレビューに即反映され、出力コードの値も連動して書き換わります。
| パラメータ | 役割 |
|---|---|
| 枚数 | リングに並べるカードの数。多いほど密に、少ないほど一枚ずつが大きく見える |
| 半径 | 回転の輪の大きさ。大きくすると外側に広がり、奥行きが強調される |
| 遠近（perspective） | カメラとの距離感。小さいほどパースが強く、立体感が誇張される |
| 傾き | リング全体を上下に傾ける角度。見下ろし／見上げの構図を作る |
| 速度 | 自動回転やドラッグ後に回り続ける速さ |
| 色 | カードやアクセントの配色。背景の明暗に合わせて調整する |
とくに半径と遠近はセットで効いてくるパラメータです。半径を大きくして奥行きを出しつつ、遠近を小さくしすぎると手前のカードだけが極端に大きくなり、崩れて見えることがあります。プレビューを回しながら、両方のバランスを取るのがコツです。
生成されるコードの中身
出力されるのは、GSAPのCDN読み込み・HTML・CSS・初期化JSが一体になった完全版です。たとえば基本のメリーゴーランド型では、おおよそ次のような構成のコードが得られます。
<!-- 1. <head> に GSAP を読み込み -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/Draggable.min.js"></script>
<!-- 2. CSS（奥行きを作る部分） -->
<style>
.stage { perspective: 1200px; } /* 遠近 */
.ring { transform-style: preserve-3d; } /* 子要素を3D空間に */
.card { position: absolute; }
</style>
<!-- 3. HTML -->
<div class="stage">
<div class="ring">
<div class="card"><img src="1.jpg" alt="" /></div>
<div class="card"><img src="2.jpg" alt="" /></div>
<!-- 枚数だけカードを並べる -->
</div>
</div>
<!-- 4. </body> 直前に初期化 -->
<script>
const cards = gsap.utils.toArray('.card');
const radius = 320; /* 半径 */
const step = 360 / cards.length; /* カード間の角度 */
/* 各カードをリング状に配置 */
cards.forEach((card, i) => {
gsap.set(card, { rotationY: i * step, transformOrigin: '50% 50% ' + (-radius) + 'px' });
});
/* ドラッグで慣性をつけて回す */
Draggable.create('.ring', { type: 'rotationY', inertia: true });
</script>ポイントは、親にperspective、回す要素にtransform-style: preserve-3dを当てて3D空間を作り、各カードを360 ÷ 枚数ずつrotationYでずらしてリングに並べているところです。回転と慣性はGSAPのDraggableが担当します。タイプ（観覧車・カードスタックなど）が変わると、この配置ロジックがそれぞれの並べ方に差し替わります。実際の出力には、選んだタイプやパラメータに応じた値が入った状態でコードが生成されます。
ドラッグで回す「慣性」の仕組み
このツールの3Dカルーセルは、つかんで回すと指を離してもしばらく回り続けます。これは慣性（イナーシャ）と呼ばれる挙動で、GSAPのDraggableが「離した瞬間の速さ」をもとに、徐々に減速しながら自然な位置で止まるように計算してくれます。
自分で実装する場合は、ドラッグの移動量を回転角に変換し、離したあとの減速をフレームごとに計算する必要があります。このツールではそこをinertia: trueに任せているため、出力コードを貼るだけで「ぬるっと回って止まる」操作感が再現されます。速度スライダーは、自動回転とこの慣性後の回り続ける勢いの両方に効きます。
画像・コンテンツの差し替え方
出力コードにはサンプル画像が入っています。HTML内の各<img>のsrcを自分の画像URLに差し替え、カードを必要な枚数だけ増減すればそのまま動きます。枚数を変えたときは、ツール側の「枚数」もそろえておくと、角度の計算がずれずにきれいなリングになります。
カードに入れるのは画像だけに限りません。各.cardの中はふつうのHTMLなので、見出しやボタンを置けば商品カードやプロフィールカードの3Dカルーセルにもできます。ただし回転中はカードが斜めを向くため、文字は大きめ・短めにして、正面付近で読ませるのが読みやすさのコツです。
手書き実装・他ツールとの使い分け
CodeQuestにはカルーセル・スライダー関連のツールや記事がいくつかあります。さっとコードを作るか、仕組みから手で実装するかは、目的に合わせて選んでください。
| やりたいこと | 向いている方法 |
|---|---|
| 3Dで回るカルーセルのコードをすぐ手に入れたい | このツール |
| 3Dカルーセルの仕組みを理解しながら手で実装したい | 3Dカルーセルの実装解説記事 |
| Swiper・Splideなど2Dの定番スライダーを作りたい | スライダー／カルーセル ジェネレーター |
奥行きや回転の仕組みをtransformから理解したい場合は、CSSとJavaScriptで作る3Dカルーセルの実装ガイド が近道です。perspectiveやrotateYの意味を順番に解説しています。
3DではなくSwiper・Splide・Slickのような定番の2Dスライダーが必要なら、スライダー／カルーセルをコピペで作る無料ツール のほうが向いています。表示枚数やレスポンシブの出し分けに強いツールです。
カルーセルに組み合わせるホバーや表示アニメーションを足したいときは、CSSアニメーションをコピペで使える無料ツール も合わせてどうぞ。
よくある失敗・注意点
3Dカルーセルを実装するときに、つまずきやすいポイントを3つにまとめます。
- 画像の縦横比がバラバラでガタつく： サイズの違う画像を混ぜると、カードごとに大きさが変わって輪が乱れます。
img { width: 100%; height: 100%; object-fit: cover; }でカードの枠に合わせて切り抜くと安定します。 - 枚数を増やしすぎて重なる： 半径に対してカードが多すぎると、隣どうしが重なって読めなくなります。枚数を増やすときは半径も一緒に大きくして、間隔を確保します。
- スマホで回しにくい・はみ出す： 半径が大きいまま狭い画面に置くと、カードが画面外に出ます。スマホでは半径を小さめにするか、表示領域に収まる枚数に絞ると操作しやすくなります。
よくある質問（FAQ）
Q. 3Dカルーセル ジェネレーターは無料ですか？
はい。完全無料で、登録も透かしもありません。生成したコードはそのまま商用サイトでも利用できます。データはサーバーに送信されず、すべてブラウザ内で処理されます。
Q. どの3Dタイプを選べばいいですか？
迷ったら、まずは定番のメリーゴーランドが無難です。見慣れた水平回転で、枚数や半径の変化がつかみやすいタイプです。インパクト重視ならフラワーや観覧車、少数枚をきっちり見せたいならキューブを選ぶとよいでしょう。
Q. GSAPの読み込みは自分で用意する必要がありますか？
必要ありません。出力コードにGSAPのCDN読み込みが含まれた「完全版」が生成されるので、そのまま貼れば動きます。GSAPは商用サイトでも無料で利用できます。
Q. 画像はどうやって差し替えますか？
出力コードにはサンプル画像が入っています。HTML内の<img>のsrcを自分の画像URLに差し替え、カードを必要な枚数だけ増減すればそのまま動きます。枚数を変えたら、ツール側の「枚数」もそろえると角度がずれません。
Q. スマホでもちゃんと動きますか？
動きます。タッチでドラッグして回せます。ただし半径が大きいとカードが画面外にはみ出しやすいので、スマホでは半径を小さめにするか、枚数を絞ると操作しやすくなります。
Q. 画像ではなくテキストやボタンも入れられますか？
入れられます。各カードの中身はふつうのHTMLなので、見出しやボタンを置けば商品カードやプロフィールカードの3Dカルーセルになります。回転で斜めを向くため、文字は大きめ・短めにすると読みやすくなります。
まとめ
- 3Dカルーセル ジェネレーターは、メリーゴーランド・縦回転・カードスタック・フラワー・キューブ・観覧車の3Dカルーセルを、コピペできるコードとして出力する無料ツール
- 同じ画像のまま6つの回り方を切り替えて見比べられる。迷ったらメリーゴーランドから試すのがおすすめ
- 枚数・半径・遠近・傾き・速度・色を調整でき、ドラッグで慣性をつけて回せるプレビューでその場で確認できる
- 出力はGSAP CDN込みの完全版。画像URLを差し替えればそのまま動き、商用利用も可能
角度計算やGSAPの記法を毎回書く手間が、タイプを選んでスライダーを触るだけに変わります。まずはメリーゴーランドのまま、枚数と半径を動かすところから試してみてください。
3Dカルーセルを組み込んだサイトを公開したあとは、検索エンジンに正しく見つけてもらう番です。CodeQuest.work SEOの無料診断で、サイトの構造化データや表示速度をチェックできます。
関連記事
CSSとJavaScriptで作る3Dカルーセル｜キーボード操作対応のインタラクティブギャラリー