3Dカードを画面の外へ出さずにめくる

カードをめくる演出では、回転だけでなく横移動も加えたくなる。しかし、translateX()と大きなrotateY()を組み合わせると、見えない瞬間にも描画領域がカード枠を超える。Android版Chromeでは、その一時的な範囲がページ全体の表示へ影響することがある。

動かすのは面だけ

安全な構成では、外側のカードを固定し、内側の面だけを回転させる。回転角は90度を大きく超えず、進むときは左辺、戻るときは右辺を支点にする。

.card-face.is-exiting-next {
  transform: rotateY(-88deg) scale(0.99);
  transform-origin: left center;
}

カードの外枠にはoverflow: clipとcontain: paintを設定し、描画を名刺の中へ閉じ込める。親と子の両方を3D変形しないことも大切だ。

演出の違いは方向でつくる

派手な移動量を使わなくても、支点と回転方向が逆なら、左右タップの違いは伝わる。安定性を削って距離を増やすより、短い動きの意味をはっきりさせるほうが、触った感覚は自然になる。