@charset "utf-8";

* {
    margin: 0;
    padding: 0;
}

body {
    /* 关键：占满屏幕高度 */
    background-attachment: fixed;
    background-size: 100% 100%;
    position: relative;
    display: flex;
    /* 弹性居中 */
    align-items: center;
    justify-content: center;
    /* 背景图核心适配样式 */
    background-image: url(./bg-img.png);
    background-position: center center;
    /* 图片水平+垂直居中 */
    background-size: cover;
    /* 保持比例，覆盖整个容器（要么适配宽，要么适配高），超出裁剪 */
    background-repeat: no-repeat;
    /* 禁止图片重复 */
    background-attachment: fixed;
    /* 可选：背景图固定，不随滚动移动（全屏场景更适配） */
    /* 原有尺寸+溢出裁剪 */
    height: 100vh;
    /* 改用100vh更稳定，确保占满视口高度 */
    width: 100vw;
    /* 占满视口宽度 */
    overflow: hidden;
    /* 裁剪超出视口的部分，避免滚动条 */
}

li {
    list-style: none;
}

.box {
    width: 200px;
    height: 200px;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
    position: relative;
    /* 改为 relative，不再使用 absolute 硬偏移 */
    margin: 0;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: rotateX(13deg);
    -webkit-animation: move 5s linear infinite;
}

.minbox {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50px;
    top: 30px;
    -webkit-transform-style: preserve-3d;
}

.minbox li {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 0;
    top: 0;
}

.minbox li:nth-child(1) {
    background: url(./img/01.jpg) no-repeat 0 0;
    -webkit-transform: translateZ(50px);
}

.minbox li:nth-child(2) {
    background: url(./img/02.jpg) no-repeat 0 0;
    -webkit-transform: rotateX(180deg) translateZ(50px);
}

.minbox li:nth-child(3) {
    background: url(./img/03.jpg) no-repeat 0 0;
    -webkit-transform: rotateX(-90deg) translateZ(50px);
}

.minbox li:nth-child(4) {
    background: url(./img/04.jpg) no-repeat 0 0;
    -webkit-transform: rotateX(90deg) translateZ(50px);
}

.minbox li:nth-child(5) {
    background: url(./img/05.jpg) no-repeat 0 0;
    -webkit-transform: rotateY(-90deg) translateZ(50px);
}

.minbox li:nth-child(6) {
    background: url(./img/06.jpg) no-repeat 0 0;
    -webkit-transform: rotateY(90deg) translateZ(50px);
}

.maxbox li:nth-child(1) {
    background: url(./img/1.jpg) no-repeat 0 0;
    -webkit-transform: translateZ(50px);
}

.maxbox li:nth-child(2) {
    background: url(./img/2.jpg) no-repeat 0 0;
    -webkit-transform: translateZ(50px);
}

.maxbox li:nth-child(3) {
    background: url(./img/3.jpg) no-repeat 0 0;
    -webkit-transform: rotateX(-90deg) translateZ(50px);
}

.maxbox li:nth-child(4) {
    background: url(./img/4.jpg) no-repeat 0 0;
    -webkit-transform: rotateX(90deg) translateZ(50px);
}

.maxbox li:nth-child(5) {
    background: url(./img/5.jpg) no-repeat 0 0;
    -webkit-transform: rotateY(-90deg) translateZ(50px);
}

.maxbox li:nth-child(6) {
    background: url(./img/6.jpg) no-repeat 0 0;
    -webkit-transform: rotateY(90deg) translateZ(50px);
}

.maxbox {
    width: 800px;
    height: 400px;
    position: absolute;
    left: 0;
    top: -20px;
    -webkit-transform-style: preserve-3d;

}

.maxbox li {
    width: 200px;
    height: 200px;
    background: #fff;
    border: 1px solid #ccc;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0.2;
    -webkit-transition: all 1s ease;
}

.maxbox li:nth-child(1) {
    -webkit-transform: translateZ(100px);
}

.maxbox li:nth-child(2) {
    -webkit-transform: rotateX(180deg) translateZ(100px);
}

.maxbox li:nth-child(3) {
    -webkit-transform: rotateX(-90deg) translateZ(100px);
}

.maxbox li:nth-child(4) {
    -webkit-transform: rotateX(90deg) translateZ(100px);
}

.maxbox li:nth-child(5) {
    -webkit-transform: rotateY(-90deg) translateZ(100px);
}

.maxbox li:nth-child(6) {
    -webkit-transform: rotateY(90deg) translateZ(100px);
}

.box:hover ol li:nth-child(1) {
    -webkit-transform: translateZ(300px);
    width: 400px;
    height: 400px;
    opacity: 0.8;
    left: -100px;
    top: -100px;
}

.box:hover ol li:nth-child(2) {
    -webkit-transform: rotateX(180deg) translateZ(300px);
    width: 400px;
    height: 400px;
    opacity: 0.8;
    left: -100px;
    top: -100px;
}

.box:hover ol li:nth-child(3) {
    -webkit-transform: rotateX(-90deg) translateZ(300px);
    width: 400px;
    height: 400px;
    opacity: 0.8;
    left: -100px;
    top: -100px;
}

.box:hover ol li:nth-child(4) {
    -webkit-transform: rotateX(90deg) translateZ(300px);
    width: 400px;
    height: 400px;
    opacity: 0.8;
    left: -100px;
    top: -100px;
}

.box:hover ol li:nth-child(5) {
    -webkit-transform: rotateY(-90deg) translateZ(300px);
    width: 400px;
    height: 400px;
    opacity: 0.8;
    left: -100px;
    top: -100px;
}

.box:hover ol li:nth-child(6) {
    -webkit-transform: rotateY(90deg) translateZ(300px);
    width: 400px;
    height: 400px;
    opacity: 0.8;
    left: -100px;
    top: -100px;
}

@media (max-width: 768px) {
    .box {
        width: 150px;
        height: 150px;
    }

    .minbox {
        width: 75px;
        height: 75px;
        left: 37.5px;
        top: 22.5px;
    }

    .minbox li {
        width: 75px;
        height: 75px;
    }

    .maxbox {
        width: 600px;
        height: 300px;
        top: -15px;
    }

    .maxbox li {
        width: 150px;
        height: 150px;
    }

    .box:hover ol li {
        width: 300px !important;
        height: 300px !important;
        left: -75px !important;
        top: -75px !important;
    }
}

@keyframes move {
    0% {
        -webkit-transform: rotateX(13deg) rotateY(0deg);
    }

    100% {
        -webkit-transform: rotateX(13deg) rotateY(360deg);
    }
}