/* 修改后的CSS */
body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    background: #222;
    perspective: 1000px;
    overflow: hidden; /* 防止滚动条出现 */
    position: relative; /* 为视频定位做准备 */
    justify-content: flex-start; /* 从justify-content: center; 改为 flex-start */
    padding-left: 210px;
}

#video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.scene {
    width: 300px;
    height: 300px;
    position: relative;
    transform-style: preserve-3d;
    animation: rotate 12s infinite linear;
}
.scene-container {
    left: 1%;
}

/* 其余原有CSS保持不变... */

.cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
}

.side {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.9;
    border: 2px solid white;
    box-sizing: border-box;
}

.side img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.front { transform: translateZ(150px); }
.back { transform: translateZ(-150px) rotateY(180deg); }
.right { transform: rotateY(90deg) translateZ(150px); }
.left { transform: rotateY(-90deg) translateZ(150px); }
.top { transform: rotateX(90deg) translateZ(150px); }
.bottom { transform: rotateX(-90deg) translateZ(150px); }

@keyframes rotate {
    0% { transform: rotateY(0) rotateX(0); }
    16.6% { transform: rotateY(90deg) rotateX(0); }
    33.3% { transform: rotateY(180deg) rotateX(0); }
    50% { transform: rotateY(270deg) rotateX(0); }
    66.6% { transform: rotateY(360deg) rotateX(90deg); }
    83.3% { transform: rotateY(360deg) rotateX(180deg); }
    100% { transform: rotateY(360deg) rotateX(360deg); }
}