本文详解如何为已通过 transform: rotate(-90deg) 垂直显示的按钮添加平滑的上下浮动（或缩放+透明度）动画，解决因坐标系旋转导致传统 top/bottom 动画失效的问题。
当按钮通过 css 旋转 90° 或 −90° 实现垂直排布（如侧边导航栏中的“↑”操作按钮）时，其文档流位置与视觉方向已解耦——此时直接对 top、bottom、margin-top 等属性做动画，往往无法产生预期的“上下跳动”视觉效果。根本原因在于：旋转后的元素仍沿原始坐标系进行布局计算，而动画若未在变换上下文中统一处理，会导致位移方向错乱。
正确的解决方案是：全程使用 transform 系列属性完成动画，确保所有变化（旋转、位移、缩放、透明度）在同一变换空间中叠加。由于旋转后 Y 轴方向已变为水平方向，我们需将“上下浮动”映射为旋转坐标系下的等效位移——最直观且兼容性佳的做法是结合轻微缩放（scale）与透明度（opacity）变化，模拟轻盈弹跳感；若需真实位移，可配合 translateY() 并在 transform 中按序组合。
以下为推荐实现（支持现代浏览器，含降级兼容）：
.test { /* 基础垂直旋转 */ transform: rotate(-90deg); transform-origin: bottom right; /* 以右下角为旋转中心，保持按钮锚点稳定 */ /* 可选：提升渲染性能 */ will-change: transform, opacity; /* 重置默认按钮样式，避免旋转后尺寸异常 */ border: none; background: #4a6fa5; color: white; padding: 12px 20px; font-size: 14px; cursor: pointer; } /* 触发动画：此处使用 :focus + JS 添加类，更可控 */ .test.animated { animation: floatUpAndDown 0.8s ease-in-out forwards; } @keyframes floatUpAndDown { 0% { transform: rotate(-90deg) scale(1); opacity: 1; } 50% { transform: rotate(-90deg) scale(0.92) translateY(-4px); /* 向“上”微移（视觉上） */ opacity: 0.85; } 100% { transform: rotate(-90deg) scale(1); opacity: 1; } }HTML 中通过 JavaScript 触发动画（推荐方式，避免依赖 focus 伪类限制）：
立即学习“前端免费学习笔记（深入）”；
✅ 关键注意事项：
- 务必在 @keyframes 中重复声明 rotate(-90deg)：CSS 动画会覆盖原样式中的 transform，若遗漏旋转，按钮将在动画过程中短暂恢复水平状态；
- transform-origin 需与基础样式一致：确保旋转基点稳定，避免动画抖动；
- 避免混用 top/margin 与 transform 动画：二者触发不同渲染管线，易引发布局重排或闪烁；
- 移动端需添加 cursor: pointer：部分 ios 浏览器对非链接/按钮元素的 :active 状态支持不完善；
- 如需循环动画：将 animation-iteration-count: infinite 与 animation-direction: alternate 组合使用，并调整 animation-duration 控制节奏。
该方案不仅解决了垂直按钮的动画适配问题，更体现了现代 CSS 动画的设计原则：统一变换空间、最小化重排、语义清晰、渐进增强。实际项目中，还可结合 prefers-reduced-motion 媒体查询为无障碍用户提供动画降级支持。