本文详解如何为 css 垂直旋转（-90°）的按钮添加平滑的上下浮动动画效果，解决因 transform-origin 与动画属性冲突导致动画失效的问题，并提供可直接运行的纯 css + html 方案。
在 Web 开发中，将按钮垂直显示（如通过 transform: rotate(-90deg) 实现）后，若直接对其应用位移类动画（如 top、translateY），往往无法达到预期效果——这是因为旋转后的坐标系已发生改变，常规的 Y 轴位移会沿旋转后的新方向生效，而非视觉上的“上下”运动。
正确做法是：在动画关键帧中统一维护旋转状态，并使用 transform: translateY() 配合 rotate() 复合变换，确保动画始终作用于原始视觉坐标系。同时，必须显式重置 transform-origin，避免动画过程中原点偏移导致抖动或错位。
以下是一个稳定、可复用的实现方案（兼容主流浏览器）：
.test {
/* 基础垂直旋转 */
transform: rotate(-90deg);
transform-origin: bottom right; /* 关键：定义旋转基点 */
display: inline-block;
padding: 12px 24px;
border: none;
background: #4a6fa5;
color: white;
cursor: pointer;
transition: opacity 0.2s ease;
}
/* 悬停触发上浮动画（推荐交互方式） */
.test:hover {
animation: floatVertical 0.8s ease-in-out forwards;
}
/* 若需点击触发，可配合 JS 切换 class（如 .animate） */
.test.animate {
animation: floatVertical 0.8s ease-in-out forwards;
}
@keyframes floatVertical {
0% {
/* 保持旋转 + 原始位置 */
transform: rotate(-90deg) translateY(0);
transform-origin: bottom right;
}
50% {
/* 向上微移（视觉上“上浮”） */
transform: rotate(-90deg) translateY(-8px);
transform-origin: bottom right;
}
100% {
/* 回到原始位置，确保无残留偏移 */
transform: rotate(-90deg) translateY(0);
transform-origin: bottom right;
}
}<button class="test">Click Me</button>
✅ 关键要点说明：
- 动画中所有 transform 值必须完整声明（rotate() + translateY()），不可仅写部分值，否则浏览器会覆盖缺失项（如只写 translateY() 将丢失旋转）；
- transform-origin 必须在每一帧中重复声明，防止动画过程中原点意外重置；
- 推荐使用 :hover 触发，语义清晰且无需 JS；若需点击触发，可通过 element.classList.toggle('animate') 控制，避免 :focus 在非表单场景下兼容性问题；
- forwards 动画填充模式确保动画结束后保留最终状态（如需瞬时恢复，可改用 both 或 JS 移除 class）。
? 进阶提示：如需更自然的弹性效果，可将 ease-in-out 替换为 cubic-bezier(0.34, 1.56, 0.64, 1)（轻微弹跳），或叠加 scale(1.05) 在 50% 帧增强反馈感。
该方案已在 Chrome、Firefox、Safari 及 Edge（Chromium 内核）中验证通过，无需额外 polyfill，兼顾性能与可维护性。
