如何为旋转的绝对定位图片添加原位对角线滚动动画？

问题根源 #

给元素添加transform: rotate()后，CSS盒模型的布局位置和视觉上的旋转元素是分离的：top/left这类布局属性仅作用于未旋转的原始盒模型，而非旋转后的视觉元素。直接修改top会让元素沿原始垂直方向移动，和旋转后的视觉方向错位，导致滚动行为异常。

解决方案 #

改用transform的translate()属性实现位移，将旋转和位移整合到同一个transform声明中——transform的多个变换会按顺序生效，位移会沿着旋转后的元素坐标系执行，确保滚动方向与视觉上的对角线一致。

修改后的CSS代码 #

基础样式：

.image-diagonal {
  position: absolute;
  top: 0%;
  left: 20%;
  /* 整合旋转与初始位移（初始位移为0） */
  transform: rotate(-15deg) translateY(0);
  /* 仅过渡transform属性，优化性能 */
  transition: transform 1s ease-in-out;
}

hover状态样式：

.container:hover .image-diagonal {
  /* 沿旋转后的垂直方向位移，数值可根据容器/元素尺寸调整 */
  transform: rotate(-15deg) translateY(-120%);
}

补充说明 #

• 若需要元素完全滚出容器，可根据容器高度调整translateY的数值（例如使用calc(-100vh - 100%)，确保元素整体移出视口/容器）。
• 避免使用transition: all，明确过渡transform能减少浏览器不必要的计算开销，提升动画流畅度。

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