本文讲解如何为 css 垂直旋转（-90°）的按钮实现平滑、可控的上下位移动画，解决因 `transform` 叠加导致传统 `top`/`margin` 动画失效的问题，通过 `@keyframes` 配合 `transform: translatey()` 实现精准垂直动效。
当按钮通过 transform: rotate(-90deg) 垂直显示时，其坐标系已发生旋转——此时直接使用 top、margin-top 或 translateY() 会产生意料之外的偏移方向（例如向左/右移动而非上下）。根本原因在于：CSS transform 是叠加生效的，多个 transform 声明（如 rotate + translateY）会按顺序复合运算，而浏览器仅保留最后一个 transform 值。因此，若 .test 已声明 rotate(-90deg)，后续动画中若只写 translateY(-10px)，将完全覆盖原有旋转，导致按钮“躺平”回水平状态。
✅ 正确解法：在动画关键帧中显式复用原始旋转，并叠加垂直位移。推荐使用 transform: rotate(-90deg) translateY(-8px) 的组合写法，确保旋转基准不变，位移沿视觉上的“垂直方向”发生。
以下是完整、可直接运行的实现方案：
.test {
/* 基础垂直旋转：绕右下角锚点，避免布局塌陷 */
transform: rotate(-90deg);
transform-origin: bottom right;
/* 触发硬件加速，提升动画流畅度 */
will-change: transform;
/* 可选：重置默认样式，便于控制尺寸 */
border: none;
background: #4a6fa5;
color: white;
padding: 12px 24px;
font-size: 16px;
cursor: pointer;
}
/* 点击触发动画：使用 :focus-within 或 JS 添加类更可控 */
.test.animate-up {
animation: verticalBounce 0.6s ease-in-out forwards;
}
@keyframes verticalBounce {
0% {
transform: rotate(-90deg) translateY(0);
}
50% {
transform: rotate(-90deg) translateY(-10px); /* 视觉上“上移” */
}
100% {
transform: rotate(-90deg) translateY(0);
}
}? 关键注意事项：
- 勿混用多组 transform 声明：CSS 中重复写 transform: 会导致后者覆盖前者（如 .test { transform: rotate(-90deg); } + .test:hover { transform: translateY(-5px); } → 旋转丢失）。务必在动画中合并所有变换操作。
- transform-origin 需保持一致：若基础样式设为 bottom right，动画中也需维持相同原点，否则旋转中心偏移会放大位移错觉。
- 推荐 JS 控制动画开关：相比 :focus 或 :hover，通过 classList.add() 显式触发更可靠，且可配合 setTimeout 自动清理动画类，避免重复点击堆积。
- 性能优化：添加 will-change: transform 提示浏览器提前启用 GPU 加速；动画时长建议控制在 0.4s–0.8s 之间，兼顾响应性与自然感。
? 扩展提示：如需“弹性回弹”效果，可将 animation-timing-function 替换为 cubic-bezier(0.2, 0.8, 0.4, 1)；若按钮需响应不同屏幕方向，建议结合 @media (orientation: portrait) 动态调整旋转角度。
该方案已在现代浏览器（Chrome/Firefox/Safari/Edge）中验证兼容，无需前缀（-webkit- 等），简洁、健壮、易于维护。
