CSS旋转行为不符合预期：版权文本hover旋转异常求助

版权信息初始设置为rotate: -90deg，沿左侧边缘上下排列显示正常，但鼠标悬停父级<div>时，若设置rotate: 90deg，元素会旋转180°导致方向完全相反，而非预期的沿底部左右排列。只有将hover状态的旋转角度设为360deg才能得到预期效果，对此存在疑问。

CSS的rotate属性设置的是元素的绝对旋转角度，但过渡动画会选择最短旋转路径。初始状态是-90deg，若目标角度设为90deg，浏览器会计算两个角度的最短距离：从-90°到90°的正向/反向路径都是180°，所以会直接旋转180°，导致文本方向相反。

而360deg等价于0deg，从-90deg到0deg的最短路径是顺时针旋转90°，刚好符合你想要的“沿底部左右排列”的效果。

直接将hover状态的rotate值设为0deg即可，和360deg效果一致但更直观：

.parent {
  height: 100vh;
}

.copy-txt {
  color: rgba(255, 255, 255, 0.5);
  font-size: 10px;
  text-align: center;
}

.copy-txt > a {
  color: rgba(255, 255, 255, 0.5);
  font-size: 10px;
}

.copyright {
  position: absolute;
  rotate: -90deg;
  transition: rotate 0.3s ease-in-out;
  margin-left: 45px;
  background-color: rgb(10, 28, 46);
  width: 150px;
  height: 60px;
  padding-top: 0px;
  top: 40%;
  color: rgba(255, 255, 255, .5);
  text-align: center;
}

.parent:hover .copyright {
  rotate: 0deg; /* 替换为0deg，效果和360deg一致 */
}

注：hover状态无需重复定义transition和display: block，初始状态已配置过渡规则，仅需修改目标属性即可。

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