CSS动画旋转异常：自动滚动轮播卡片旋转重置问题修复

问题分析 #

你遇到的核心问题：

• 父元素.slide-track的滚动动画与子元素卡片的3D变换在渲染层级上产生冲突，导致卡片旋转效果异常
• 动画循环卡顿源于未启用GPU加速，浏览器重绘重排消耗过多性能

解决方案 #

通过分离变换层级和优化动画性能彻底解决这两个问题：

1. 分离卡片布局与3D变换 #

给每个轮播卡片添加内部容器，将rotateX()和scale()变换移到内部容器上，让父元素的横向滚动动画与卡片的3D变换互不干扰，确保旋转角度稳定保持。

2. 启用GPU加速优化动画 #

使用translate3d()替代translateX()触发GPU加速，同时添加will-change: transform提示浏览器提前优化动画，减少循环时的卡顿。

修改后的完整代码 #

HTML

<div class="slider">
    <div class="slide-track">
        <div class="slide">
            <div class="slide-content"></div>
        </div>
        <div class="slide">
            <div class="slide-content"></div>
        </div>
        <div class="slide">
            <div class="slide-content"></div>
        </div>
        <div class="slide">
            <div class="slide-content"></div>
        </div>
        <div class="slide">
            <div class="slide-content"></div>
        </div>
        <div class="slide">
            <div class="slide-content"></div>
        </div>
        <div class="slide">
            <div class="slide-content"></div>
        </div>
        <div class="slide">
            <div class="slide-content"></div>
        </div>
        <div class="slide">
            <div class="slide-content"></div>
        </div>
        <div class="slide">
            <div class="slide-content"></div>
        </div>
        <div class="slide">
            <div class="slide-content"></div>
        </div>
        <div class="slide">
            <div class="slide-content"></div>
        </div>
        <div class="slide">
            <div class="slide-content"></div>
        </div>
        <div class="slide">
            <div class="slide-content"></div>
        </div>
    </div>
</div>

CSS

.slider {
    background: none;
    height: 600px;
    margin: auto;
    overflow:hidden;
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.slider::before,
.slider::after {
    content: "";
    height: 100px;
    position: absolute;
    width: 200px;
    z-index: 2;
}

.slide-track {
    animation: scroll 5s linear infinite;
    display: flex;
    width: calc(300px * 14);
    perspective: 9000px;
    will-change: transform; /* 提示浏览器优化动画性能 */
}

@keyframes scroll {
    0% { 
        transform: translate3d(0, 0, 0); /* 使用translate3d触发GPU加速 */
    }
    100% { 
        transform: translate3d(calc(-300px * 7), 0, 0); 
    }
}

.slide {
    width: 300px;
    height: 500px;
    margin-left: 30px;
    display: flex;
    justify-content: center;
    overflow: hidden;
    flex-direction: column;
    align-items: center;
}

.slide-content {
    width: 100%;
    height: 100%;
    background-color: #17141d;
    transform: rotateX(45deg) scale(0.8);
    border-radius: 10px;
    box-shadow: -1rem 0 3rem #000;
}

效果说明 #

• 卡片的rotateX(45deg)变换会稳定保持，不会受父元素滚动动画影响
• translate3d和will-change启用GPU加速后，动画循环时的卡顿会明显减少，滚动更平滑

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