WebサイトやアプリのUIに「くるっ」とした動きが加わるだけで、体験は一気にリッチになります。
今回は、JavaScriptアニメーションライブラリ GSAP（GreenSock Animation Platform）を使って、カード要素をX軸方向に回転させるアニメーションUIを構築する方法をご紹介します。
名刺のようなカードがクリックに反応して回転することで、ユーザーに動きと情報の切り替わりを自然に伝えられる──
そんなインタラクティブなUI演出が、たった数行のGSAPとCSSで実装可能です。
この記事で紹介する内容
- カード要素がくるっと回転して切り替わる演出
- 前後のカードを入れ替えながらアニメーションする方法
- 回転軸と方向（transform-origin）の指定方法
- ダークモードや立体感を取り入れた今風デザイン
- クリックボタンで「次へ」「前へ」の切り替えを実装
また、この記事ではあえてコードを省略し、UIの動きそのものに焦点を当てて説明しています。実装はCodePenにて動作確認できます。
デモはこちら（CodePen）
See the Pen Untitled by masakazuimai (@masakazuimai) on CodePen.
回転アニメーションでUIに「躍動感」を
今回の回転UIは、名刺サイズのカードがY軸またはX軸を中心に回転することで、次のカードが「めくられる」ように登場する演出です。
これまでの記事では、カードを「沈みながら後ろに送る」という演出でしたが、
今回の別パターンではカードそのものが回転して切り替わることで、よりダイレクトでダイナミックな印象を与えることができます。
UI構成と動きの考え方
UIの構造は以下のようにシンプルです。
.card-holder：カード全体を包む領域。perspectiveを加えて立体的に.card：背景画像付きのカード要素。複数重ねて表示- 「次へ」「前へ」ボタンで順番切り替え
▶ アニメーションの流れ（次のカード）
- 手前のカードが
X軸に90度回転して消える - DOMの最後に移動して裏側でリセット
- 回転角
-90度 → 0度に戻して再登場
▶ 前のカードに戻すとき
- 最後尾のカードを先頭に移動
- 初期状態で
90度回転させておく 0度まで回転して表示
このように、GSAPの .to() や .set() を活用することで、「視覚的には回転しながら切り替わっている」ように見せつつ、実際にはDOMを入れ替えて再利用しているのがポイントです。
回転の起点は「transform-origin」で指定する
カードの回転は、transform-origin の設定で表現が大きく変わります。
center bottom：下辺を支点に上に向かって回転（めくる感じ）center top：上辺を支点に下に倒れるような回転center center：中心からぐるりと回る回転（回転ドア風）
今回は名刺風のカードを「上にめくる」ように演出したかったため、center bottom → 回転 → center top という切り替えを採用しています。
なぜGSAPを使うのか？
CSSでもtransform: rotateX()は使えますが、GSAPを使うメリットは圧倒的です。
- イージングやタイミングの制御が簡単
- 複数ステップのアニメーションが連続で記述できる
- onCompleteイベントでDOM操作と連携しやすい
rotationX,rotationYなどのプロパティが明確に扱える
GSAPは「回転」や「位置変更」などのトランスフォーム系アニメーションに極めて強く、柔軟に拡張しやすいのが特長です。
デザインはモダンでシンプルに
今回のデモは以下のデザイン要素を意識して調整しています：
| 要素 | スタイル |
|---|---|
| カードサイズ | 640px × 400px の名刺風比率 |
| 背景画像 | picsum.photos のランダム画像でおしゃれに見せる |
| ボタン | ブルー系のモダンな配色で存在感を |
| 影と立体感 | box-shadow, perspective, backface-visibility を活用 |
これらを組み合わせることで、軽量でありながら視覚的に高品質なUIに仕上がります。
応用アイデア（発展編）
この「カード回転」アニメーションは、以下のように応用が可能です：
✅ 表裏の切り替え（名刺裏表）
カードの裏面に transform: rotateX(180deg) を指定し、表面と裏面を front / back クラスで切り替えると、フリップアニメーションになります。
「プロフィール表示」「連絡先情報」「商品詳細」などに最適です。
✅ スワイプ操作の追加
ボタンだけでなく、GSAPの Draggable プラグインを使えば、カードを指でスワイプしてめくるインタラクションも実現可能です。
スマホ対応を視野に入れるなら、UX向上につながる重要な要素です。
✅ タイムライン管理
複数のアニメーションを連続して発火させるなら、gsap.timeline() を使うと管理がしやすくなります。
回転と拡大縮小、opacityなどを複合的に組み合わせれば、もっと深みのある演出も実現可能です。
回転演出は「操作性」と「意外性」のバランスが良い
今回のような「くるっ」とした動きは、UIに変化を与えることで操作性を高めつつ、ちょっとした驚き（意外性）を与えられるのが最大の魅力です。
回転はインパクトがありながらも、ユーザーの注意を妨げず、次の情報に自然につながる動きです。
ビジュアルの切り替え、カードの再配置、ページ遷移演出など、さまざまな場面で活用できるアニメーション手法だと言えます。
まとめ｜GSAP × 回転演出でUIをアップグレード
今回の「カード回転アニメーション」は、GSAPとCSSを使って比較的シンプルな構成で実装できます。
GSAPはスムーズな回転表現を得意としており、タイミング制御やDOMとの連携も柔軟です。
ちょっとした見た目の工夫で、ユーザー体験をアップグレードできる強力なツールと言えるでしょう。
まずは今回のサンプルをベースに、自分なりのレイアウトや演出にアレンジしてみてください。
少しの回転で、UIはもっと魅力的になります。