求助：实现垂直对齐按钮的上下位移动画效果

你遇到的问题根源是按钮旋转后，CSS transform的坐标系同步发生了变化，常规水平按钮的位移逻辑不再适配。以下是直接可用的解决方案：

完整代码实现 #

<button class="test">Click</button>

.test {
  /* 垂直旋转核心样式 */
  transform: rotate(-90deg);
  transform-origin: bottom right;
  /* 基础按钮样式 */
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  background-color: #2563eb;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}

/* 定义点击回弹动画 */
@keyframes verticalBounce {
  0% {
    transform: rotate(-90deg);
  }
  40% {
    /* 旋转后向屏幕上方移动8px，根据旋转方向调整位移轴和正负 */
    transform: rotate(-90deg) translateX(-8px);
  }
  100% {
    transform: rotate(-90deg);
  }
}

.test:active {
  animation: verticalBounce 0.4s ease-in-out;
}

关键说明 #

• 按钮旋转后自身坐标系改变：rotate(-90deg)搭配bottom right原点旋转后，按钮的X轴正方向对应屏幕向上，因此用translateX实现屏幕上方的位移（正负值可根据实际显示效果微调）。
• 通过@keyframes定义「原位置→上移→回归」的动画流程，点击按钮时触发动画，ease-in-out让动画过渡更自然。
• 完全保留你原有的旋转样式，无需修改HTML结构即可实现需求。

内容的提问来源于stack exchange，提问作者Erick