I-003 Interaction complex

How to create a card flip カードフリップの作り方

3D card flip animation on click or hover. Adjust rotation axis and speed. カードをクリックまたはホバーで裏返すフリップアニメーション。回転軸と速度を調整できます。

flip card 3d transform

ライブデモ Live Demo

表面 Front

裏面 Back

0.6s

概要・用途・特徴Overview, Usage & Features

何ができるかWhat it does

3D card flip animation on click or hover. Adjust rotation axis and speed.

カードをクリックまたはホバーで裏返すフリップアニメーション。回転軸と速度を調整できます。

どこで使うかWhere to use

user engagement, data entry, content management, settings panel

プロフィールカード、商品カード、フラッシュカード、ポートフォリオアイテム

特徴Key features

3D card flip using CSS perspective and rotateY transform. Front and back faces are separate HTML elements. Flip can be triggered by click or hover. Hardware-accelerated via transform-style: preserve-3d. Fully accessible with keyboard trigger.

CSS perspectiveとrotateYを使用した3Dカードフリップ。フロントとバックは別々のHTML要素。クリックまたはホバーでフリップをトリガー。transform-style:preserve-3dでハードウェアアクセラレーション。キーボードトリガー対応のフルアクセシブル。

調整可能パラメータ Adjustable Parameters

Parameter Default Description
--flip-duration—flip animation duration
--flip-perspective—3D perspective distance
flip axis—change rotation axis (X, Z)
trigger method—toggle on click or hover

実装コード Implementation Code 

// 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;
}
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 || "Front"}</div>
        <div className="flip-face flip-back">{backContent || "Back"}</div>
      </div>
    </div>
  );
}
/* Flip card styles are now in global.css */

仕組みとカスタマイズHow It Works & Customization

仕組みHow it works

The card wrapper has perspective set on its parent and transform-style: preserve-3d. Both front and back faces are absolutely positioned within the card. The back face starts at rotateY(180deg). On flip, the card wrapper rotates to 180deg via CSS transition, bringing the back face into view while the front flips away. backface-visibility: hidden prevents seeing through the card.

カードラッパーは親にperspectiveを設定し、transform-style:preserve-3dを持ちます。フロントとバックの両面はカード内に絶対配置。バック面はrotateY(180deg)で開始。フリップ時、カードラッパーがCSSトランジションで180degに回転し、フロントがめくれる間バック面が見えてきます。backface-visibility:hiddenでカードを透けて見えるのを防止。

カスタマイズ方法Customization

Change rotateY to rotateX for a vertical flip. Adjust --flip-perspective for a dramatic (small value) or subtle (large value) 3D depth. Add a box-shadow or glow to the currently visible face to enhance the 3D illusion.

rotateYをrotateXに変えて縦フリップに。--flip-perspectiveで劇的（小さい値）または繊細（大きい値）な3D深度を調整。現在表示されている面にbox-shadowまたはグロウを追加して3Dイリュージョンを強化。

注意点Caveats

Add aria-pressed or aria-expanded to the trigger element to communicate flip state to screen readers. Provide alternative access to the back-face content since screen readers may not follow the visual flip. Include a prefers-reduced-motion fallback that shows both faces sequentially without the 3D animation.

トリガー要素にaria-pressedまたはaria-expandedを追加してフリップ状態をスクリーンリーダーに伝えてください。スクリーンリーダーが視覚的なフリップに追従しない場合があるため、バック面コンテンツへの代替アクセス手段を提供してください。3Dアニメーションなしで両面を順次表示するprefers-reduced-motionフォールバックを含めてください。

よくある質問 Frequently Asked Questions

How to customize the card flip? Card Flipをカスタマイズするには？

Modify the CSS custom properties and class styles defined in the code section. Key adjustable values include colors, sizes, durations, and spacing. See the Adjustable Parameters section for specific variables.

コードセクションで定義されているCSSカスタムプロパティとクラススタイルを変更してください。色、サイズ、時間、間隔が主な調整可能値です。具体的な変数は調整可能パラメータセクションを参照してください。

How to use the card flip in React? ReactでCard Flipを使うには？

Import the provided React component and its CSS file. The component accepts props for customization. Check the React code section for the full implementation and available props.

提供されているReactコンポーネントとCSSファイルをインポートしてください。コンポーネントのpropsでカスタマイズできます。完全な実装と利用可能なpropsはReactコードセクションを参照してください。

What are the performance implications of card flip? Card Flipのパフォーマンスへの影響は？

This implementation uses CSS transforms and opacity for animations, which are GPU-accelerated. It's lightweight and doesn't cause layout thrashing. Consider using prefers-reduced-motion for accessibility.

この実装はCSSのtransformとopacityを使用しており、GPUアクセラレーションされます。軽量でレイアウトスラッシングを引き起こしません。アクセシビリティのためにprefers-reduced-motionの使用を検討してください。

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

以下をAIに貼り付けると実装を依頼できます。 Paste the following into your AI assistant to request implementation.