CSS实现倾斜旋转无缝跑马灯时动画位置偏移问题求解

问题原因 #

• 你将旋转、位移动画同时绑定在同一个元素上，transform属性的执行顺序为从后往前，你写的translateX(100%) rotate(6deg)实际执行逻辑是先旋转、再在旋转后的坐标系下做位移，位移距离的计算基准完全偏离水平视口，就会出现位置偏移
• 元素旋转后，自身宽度在水平方向的投影长度不等于原宽度，你用translateX(±100%)计算的位移距离不符合实际滚动需求，没法做到无缝衔接

修复方案 #

拆分容器：外层父容器只负责倾斜旋转、控制展示区域，内层元素只负责水平位移动画，位移计算基于水平坐标系就不会出现偏移。如果需要完全无缝循环，可以复制一份滚动内容，让动画滚动范围对应内容总宽度的一半，首尾自然衔接。

修复后代码

/* 外层容器：仅负责旋转、控制可视区域 */
.roll-wrap {
    width: 100vw;
    height: 50px;
    overflow: hidden;
    transform: rotate(6deg);
    position: relative;
    z-index: 2;
    color: #000;
}
/* 内层滚动容器：仅负责水平滚动动画 */
.roll {
    width: fit-content;
    display: flex;
    animation: scroll-left 15s linear infinite;
    white-space: nowrap;
    line-height: 50px;
}
@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }
    100% {
        /* 滚动距离为单份内容宽度，两份内容衔接就可以做到无缝 */
        transform: translateX(-50%);
    }
}
/* 如需兼容极老版本浏览器，可以对应补全-webkit-、-moz-前缀的@keyframes和transform属性 */

<div class="roll-wrap">
    <div class="roll">
        <!-- 第一份内容 -->
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        <!-- 复制一份完全相同的内容，用来衔接首尾实现无缝 -->
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
</div>

如果要调整滚动速度，修改animation属性里的时长即可，内容越长对应设置的时长越长，滚动速度越慢。

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