移動と変形 · 動かす・回す・拡大縮小
移動(トランスレート)位移
- 直接的
- 明確
- 基礎
要素を X・Y・Z 軸に沿ってまとめて動かします。形は変わらず、位置だけが変わります。
使いどころ
形を保ったまま A から B へ動かしたいときに使います。top や left で動かすとページが重くなるので避けてください。
パラメータ
transform: translateY(-8px) · 200ms · ease-out
レシピ
移動(トランスレート) → 200ms ease-out移動(トランスレート) → transform: translateY(-8px)
AI に渡す一文
このカードの浮き上がりを transform: translateY(-8px)、200ms、ease-out に変更してください。top や margin は動かさないでください。