I-003 Card Flip | Vibe UI Pattern Library

ライブデモ Live Demo

カードをクリックすると3D回転で裏返ります。表と裏の両面に異なるコンテンツを表示できます。回転速度と視点距離を調整できます。

Click the card to flip it with 3D rotation. Display different content on front and back. Adjust rotation speed and perspective distance.

表面 Front

裏面 Back

フリップ速度 Flip Speed 0.6s

AI向け説明 AI Description

`I-003` は親要素に `perspective` を設定し、カードに `transform-style: preserve-3d` を適用します。表と裏の両面を `backface-visibility: hidden` で配置し、`.flipped` クラスで `rotateY(180deg)` を適用してフリップします。

`I-003` sets `perspective` on parent and applies `transform-style: preserve-3d` to card. Places front and back faces with `backface-visibility: hidden`, then applies `rotateY(180deg)` via `.flipped` class to flip.

調整可能パラメータ Adjustable Parameters

--flip-duration — フリップアニメーションの継続時間 flip animation duration
--flip-perspective — 3D視点の距離 3D perspective distance
flip axis — 回転軸の変更（X軸、Z軸） change rotation axis (X, Z)
trigger method — クリックまたはホバーで切り替え toggle on click or hover

実装 Implementation

HTML + CSS + JS

<div class="flip-container">
  <div class="flip-card">
    <div class="flip-face flip-front">Front</div>
    <div class="flip-face flip-back">Back</div>
  </div>
</div>

<style>
.flip-container {
  perspective: 1000px;
}

.flip-card {
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
}

.flip-container.flipped .flip-card {
  transform: rotateY(180deg);
}

.flip-face {
  backface-visibility: hidden;
}

.flip-back {
  transform: rotateY(180deg);
}
</style>

<script>
const container = document.querySelector(".flip-container");
container.addEventListener("click", () => {
  container.classList.toggle("flipped");
});
</script>

React (JSX + CSS)

// react/I-003.jsx
import { useState } from "react";
import "./I-003.css";

export default function CardFlip({ frontContent, backContent }) {
  const [isFlipped, setIsFlipped] = useState(false);

  return (
    <div className={`flip-container ${isFlipped ? "flipped" : ""}`} onClick={() => setIsFlipped(!isFlipped)}>
      <div className="flip-card">
        <div className="flip-face flip-front">{frontContent}</div>
        <div className="flip-face flip-back">{backContent}</div>
      </div>
    </div>
  );
}

/* react/I-003.css */
.flip-container {
  perspective: 1000px;
  width: 300px;
  height: 200px;
}

.flip-card {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
}

.flip-container.flipped .flip-card {
  transform: rotateY(180deg);
}

.flip-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

AIへの指示テンプレート AI Prompt Template

以下のテンプレートをコピーしてAIアシスタントに貼り付けると、このパターンの実装を依頼できます。 Copy the template below and paste it into your AI assistant to request an implementation of this pattern.

以下のUIパターンを実装してください。

- パターンID: I-003
- パターン名: カードフリップ
- 参照URL: https://devsnips.dev/animations/I-003.html
- フレームワーク: [React / Vue / Vanilla JS / その他]
- 要件:
  - デザインは参照URLのデモに準拠
  - レスポンシブ対応（モバイル/デスクトップ）
  - アクセシビリティ考慮（キーボード操作、スクリーンリーダー）
  - [ここに追加の要件を記述]

Please implement the following UI pattern.

- Pattern ID: I-003
- Pattern Name: Card Flip
- Reference URL: https://devsnips.dev/animations/I-003.html
- Framework: [React / Vue / Vanilla JS / Other]
- Requirements:
  - Follow the design from the reference URL demo
  - Responsive (mobile / desktop)
  - Accessibility (keyboard navigation, screen reader)
  - [Add your requirements here]

注意とバリエーション Notes & Variations

モバイルデバイスでは `transform-style: preserve-3d` のサポートが限定的な場合があるため、フォールバックを用意してください。`prefers-reduced-motion` では即座に切り替えるようにしてください。

Provide fallback for mobile devices where `transform-style: preserve-3d` support may be limited. Under `prefers-reduced-motion`, switch instantly without animation.