CSS 3D カード回転効果

機能

• Y 軸（左右）または X 軸（上下）で回転
• 時間と透視距離を調整可能 —— 透視が小さいほど回転の圧縮感が強くなります
• カードのサイズを調整でき、プレビューに即反映されます
• プレビューにマウスを乗せると回転の過程が見えます
• 出力では三つの重要プロパティを明記し、それぞれが必要な理由も説明
• プレビューでは表裏に文字が入っており、どちら側かが一目で分かります
• `prefers-reduced-motion` の処理を自動で添付
• 計算はすべてブラウザー内で完結します

使い方

1. 軸を選びます：左右（rotateY）が一般的、上下（rotateX）はカード一覧に向きます
2. 透視距離を調整 —— 900px 前後が自然で、400 未満は明らかに誇張されます
3. 時間を調整。UI では 400〜900ms が快適です
4. プレビューにマウスを乗せて確認し、コードをコピーします

よくある質問

回転が「回る」ではなく「潰れる」ように見えるのはなぜですか？

ほぼ確実に `perspective` の位置が違います。カードの親要素（コードでは `.flip-scene`）に付け、カード自身には付けません。カードに書くと、ブラウザーはその変形に透視を与えないため、Y 軸 90 度の回転は「幅が 0 に圧縮される」つまり潰れて見えます。この効果で最も多い間違いで、見分け方は明快です —— 回転の途中でカードが一本の線になります。

途中で鏡文字が見えるのはなぜですか？

`backface-visibility: hidden` が欠けているためです。二つの面は同じ位置に重なっており（どちらも `inset: 0`）、この指定がないと要素の裏側も描画されます —— 90 度を超えると背面の「裏」、つまり鏡文字が見えます。指定があれば、観察者に背を向けた要素はまるごと隠れ、どの瞬間も一面だけが見えます。両方の面に必要で、片方だけでは不十分です。

タッチ画面ではどうやって回転させますか？

タッチでは `hover` は信頼できません（「最初のタップ」と解釈するブラウザーもあります）。そこで出力ではクラス切替の書き方も示しています：`.flip-card.is-flipped`。JavaScript でクリック時にこのクラスを切り替えます —— これはキーボード利用者のアクセスも同時に解決します（ボタンのクリックと Enter に紐づけます）。より確実にするなら、実際の `<button>` 要素にするのが最善です。

回転の時間はどのくらいが適切ですか？

UI では 400〜900ms が目安です。 300ms 未満だと回転の過程が見えず唐突に感じられ、1 秒を超えると待たされます。また可読性に注意してください：回転中は両面の内容が斜めになり読めません。したがって重要な情報を片面だけに置かないか、ホバーを押し続けなくてもクリックで片面を保持できるようにしてください。