Flip In
フリップイン
どんな動き？
要素がY軸を軸にして90度回転した状態から、perspectiveをかけた3D空間の中で正面を向くように回転しながら登場するアニメーション。カードがくるっと裏返るような立体感のある動きが特徴で、プロフィールカードやサービス紹介カード、画像とテキストを切り替えるUIなどに使われることが多い。
よく使う場所
プロフィールカードサービス紹介カード画像切り替えギャラリー
日本語での表現例
こんな言葉で説明される動きです。
AIへの指示文（プロンプト）
ChatGPTやClaudeなどの生成AIに、このままコピーして渡せます。「詳細版」を使うと実装結果が安定しやすくなります。
Rotate the element in around the Y axis from 90 degrees to 0 within a 3D perspective, like a card flipping into view.Trigger:
When the element enters the viewport (Intersection Observer).
Initial state:
opacity: 0
rotateY: 90deg (within a perspective container)
Animation:
The element rotates around the Y axis while fading in, appearing to flip from edge-on into full view.
Final state:
opacity: 1
rotateY: 0deg
Timing:
duration: 0.7–0.9s
easing: ease-out
Play only once.実装方法の候補
この動きは以下の技術で実装できます。
CSSGSAP
別名・関連ワード
3D Flip InCard Flip EntranceRotate In