CSS与Script实现3D元素上下移动故障排查及代码修正求助

问题根源 #

你当前把动画绑定在<svg>元素上，但该元素同时设置了left:0和right:0，这会强制它水平撑满父容器，导致left属性的动画完全失效；另外，垂直方向的top变化因为没有足够的可视高度，视觉上也不明显。

简易修改方案 #

只需要调整CSS的定位逻辑，把动画载体换成<svg>的父容器.SVG_main，同时修正定位规则即可：

修改后的完整CSS代码

body{
    position: relative;
    direction: rtl;
    min-height: 100vh; /* 保证body有足够高度，让垂直移动效果可见 */
}

.SVG_main {
    position: absolute; /* 让容器成为定位和动画的载体 */
    top: 0;
    left: 0;
}

.SVG_main svg{
    width: 80px;
    height: 80px;
    /* 移除原有的absolute、left、right属性，让svg正常跟随容器移动 */
}

.animating.SVG_main {
    animation: MoveSvg 4.5s linear infinite;
}

@-webkit-keyframes MoveSvg {
    0% {
        top: 0;
        left: 0;
        transform: rotateY(0deg);
    }

    50% {
        top: calc(50vh - 40px); /* 减去svg一半高度，让元素在视口中居中 */
        left: calc(50vw - 40px);
        transform: rotateY(180deg);
    }

    100% {
        top: calc(100vh - 80px); /* 减去svg高度，避免元素超出视口底部 */
        left: 0;
        transform: rotateY(360deg);
    }
}

@keyframes MoveSvg {
    0% {
        top: 0;
        left: 0;
        transform: rotateY(0deg);
    }

    50% {
        top: calc(50vh - 40px);
        left: calc(50vw - 40px);
        transform: rotateY(180deg);
    }

    100% {
        top: calc(100vh - 80px);
        left: 0;
        transform: rotateY(360deg);
    }
}

JS代码保持不变

const items = document.querySelectorAll(".SVG_main");
items.forEach(item => item.classList.add("animating"));

核心修改说明

• 给body加min-height:100vh，确保垂直方向有足够空间展示移动效果
• 把.SVG_main设为绝对定位，让它成为动画的主体，<svg>只负责显示图形
• 移除<svg>上的定位限制，让它跟着容器一起动
• 调整关键帧里的top值，用calc计算位置，避免元素超出视口范围

这样修改后，容器会带着SVG同时完成360度3D旋转和上下移动的动画，效果就能正常呈现了。

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