本文详解如何为已通过 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 伪类限制）：
立即学习“前端免费学习笔记（深入）”；
<button class="test" onclick="this.classList.add('animated');
setTimeout(() => this.classList.remove('animated'), 800);">
Click
</button>✅ 关键注意事项：
- 务必在 @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 媒体查询为无障碍用户提供动画降级支持。
