pug+scss实现三维迷宫俯视效果代码-html代码-BFW代码库

代码语言：html
代码描述：pug+scss实现三维迷宫俯视效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
    <title>BFW NEW PAGE</title>
    
      
<style type = 'text/scss'>
// Custom param *** START
* {
        transform-style: preserve-3d;
        box-sizing: border-box;
}
body {
        margin: 0;
padding-top: 400px;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        perspective: 250vmin;
        background: radial-gradient(circle at 50% 0%, #333, #000);
        background-color: #111;
}
.cam {
        float: left;
        width: 11.11%;
        height: 11.11%;
        z-index: 333;
        position: relative;
        @for $i from 1 through 9 {
                @for $j from 1 through 9 {
                        $key: ($i - 1) * 9 + $j;
                        &:nth-child(#{$key}) {
                                &:hover ~ .content {
                                        transform: rotateX(($i - 8) * -8deg + 8) rotateZ(($j - 8) * 10deg + 30);
                                }
                        }
                }
        }
        &:hover ~ .content {
                transition: all 0.5s ease 0s;
        }
}
.content {
        width: 98vmin;
        height: 64vmin;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        background: repeating-conic-gradient(
                        #0004 0.00001%,
                        transparent 0.00005%,
                        transparent 0.0005%,
                        transparent 0.00005%
                ),
                repeating-conic-gradient(
                        #fff2 0.00002%,
                        transparent 0.00008%,
                        transparent 0.0008%,
                        transparent 0.00008%
                ),
                #626262;
        top: calc(50% - 32vmin);
        left: calc(50% - 49vmin);
        transform: rotateX(40deg);
}
.cuboid {
        --height: 1.5;
        --width: 93;
        --depth: 10;
        --hue: 100;
        --sat: 60%;
        --lum: 60%;
        height: calc(var(--height) * 1vmin);
        width: calc(var(--width) * 1vmin);
        position: absolute;
        transform: translate3d(0vmin, 29.3vmin, 0vmin);
        box-shadow: 0 0 0.01vmin 0.5vmin #284705;
}
.cuboid .side {
        position: absolute;
        top: 50%;
        left: 50%;
        height: 100%;
        width: 100%;
        border-radius: 2px;
        background: repeating-conic-gradient(
                        #0003 0%,
                        #fff0 0.0003%,
                        #fff0 0.0006%,
                        #fff0 0.0009%
                ),
                repeating-conic-gradient(#fff2 0%, #fff0 0.0005%, #fff0 0.0015%, #fff0 0.019%),
                hsl(var(--hue), var(--sat), var(--lum));
}
.cuboid .side:nth-of-type(1) {
        transform: translate3d(-50%, -50%, calc(var(--depth) * 0.5vmin));
}
.cuboid .side:nth-of-type(2) {
        transform: translate3d(-50%, -50%, calc(var(--depth) * -0.5vmin))
                rotateY(180deg);
        --lum: 25%;
        opacity: 0;
}
.cuboid .side:nth-of-type(3) {
        width: calc(var(--depth) * 1vmin);
        transform: translate(-50%, -50%) rotateY(90deg)
                translate3d(0, 0, calc(var(--width) * 0.5vmin));
        --lum: 30%;
}
.cuboid .side:nth-of-type(4) {
        width: calc(var(--depth) * 1vmin);
        transform: translate(-50%, -50%) rotateY(-90deg)
                translate3d(0, 0, calc(var(--width) * 0.5vmin));
        --lum: 40%;
}
.cuboid .side:nth-of-type(5) {
        height: calc(var(--depth) * 1vmin);
        transform: translate(-50%, -50%) rotateX(90deg)
                translate3d(0, 0, calc(var(--height) * 0.5vmin));
        --lum: 35%;
}
.cuboid .side:nth-of-type(6) {
        height: calc(var(--depth) * 1vmin);
        transform: translate(-50%, -50%) rotateX(-90deg)
                translate3d(0, 0, calc(var(--height) * 0.5vmin));
        --lum: 20%;
}

.cuboid:nth-child(2) {
        transform: translate3d(0vmin, -29vmin, 0vmin);
}
.cuboid:nth-child(3) {
        --width: 20.75;
        transform: translate3d(32.75vmin, -26vmin, 0vmin);
}
.cuboid:nth-child(4) {
        --width: 17;
        transform: translate3d(12.35vmin, -25.5vmin, 0vmin);
}
.cuboid:nth-child(5) {
        --width: 20;
        transform: translate3d(-10.5vmin, -25.5vmin, 0vmin);
}
.cuboid:nth-child(6) {
        --width: 21.5;
        transform: translate3d(-32.5vmin, -25.5vmin, 0vmin);
}
.cuboid:nth-child(7) {
        --width: 42;
        transform: translate3d(19vmin, -22.5vmin, 0vmin);
}
.cuboid:nth-child(8) {
        --width: 13.5;
        transform: translate3d(-10.5vmin, -22.2vmin, 0vmin);
}
.cuboid:nth-child(9) {
        --width: 17.9;
        transform: translate3d(-30.75vmin, -22.5vmin, 0vmin);
}
.cuboid:nth-child(10) {
        --width: 33;
        transform: translate3d(20.5vmin, -19.5vmin, 0vmin);
}
.cuboid:nth-child(11) {
        --width: 36;
        transform: translate3d(-18.75vmin, -19.5vmin, 0vmin);
}
.cuboid:nth-child(12) {
        --width: 14.85;
        transform: translate3d(29.15vmin, -16.25vmin, 0vmin);
}
.cuboid:nth-child(13) {
        --width: 9.5;
        transform: translate3d(12vmin, -16.25vmin, 0vmin);
}
.cuboid:nth-child(14) {
        --width: 12.8;
        transform: translate3d(-10.7vmin, -16.5vmin, 0vmin);
}
.cuboid:nth-child(15) {
        --width: 11.25;
        transform: translate3d(-27.65vmin, -16.25vmin, 0vmin);
}
.cuboid:nth-child(16) {
        --width: 8.5;
        transform: translate3d(28.75vmin, -13vmin, 0vmin);
}
.cuboid:nth-child(17) {
        --width: 9.65;
        transform: translate3d(8.9vmin, -13vmin, 0vmin);
}
.cuboid:nth-child(18) {
        --width: 6.5;
        transform: translate3d(-10.5vmin, -13.5vmin, 0vmin);
}
.cuboid:nth-child(19) {
        --width: 5;
        transform: translate3d(-27.5vmin, -13.5vmin, 0vmin);
}
.cuboid:nth-child(20) {
        --width: 8;
        transform: translate3d(25.75vmin, -9.8vmin, 0vmin);
}
.cuboid:nth-child(21) {
        --width: 9.5;
        transform: translate3d(5.75vmin, -10vmin, 0vmin);
}
.cuboid:nth-child(22) {
        --width: 9.5;
        transform: translate3d(-9vmin, -10.5vmin, 0vmin);
}
.cuboid:nth-child(23) {
        --width: 5;
        transform: translate3d(-24.35vmin, -9.75vmin, 0vmin);
}
.cuboid:nth-child(24) {
        --width: 4.75;
        transform: translate3d(-30.9vmin, -10vmin, 0vmin);
}
.cuboid:nth-child(25) {
        --width: 8;
        transform: translate3d(22.65vmin, -6.7vmin, 0vmin);
}
.cuboid:nth-child(26) {
        --width: 21;
        transform: translate3d(6.5vmin, -6.8vmin, 0vmin);
}
.cuboid:nth-child(27) {
        --width: 11.8;
        transform: translate3d(-11.25vmin, -7vmin, 0vmin);
}
.cuboid:nth-child(28) {
        --width: 8.25;
        transform: translate3d(-32.7vmin, -7vmin, 0vmin);
}
.cuboid:nth-child(29) {
        --width: 5;
        transform: translate3d(41vmin, -3.8vmin, 0vmin);
}
.cuboid:nth-child(30) {
        --width: 8.5;
        transform: translate3d(28.75vmin, -3.65vmin, 0vmin);
}
.cuboid:nth-child(30) {
        --width: 7.75;
        transform: translate3d(29.1vmin, -3.65vmin, 0vmin);
}
.cuboid:nth-child(31) {
        --width: 7.8;
        transform: translate3d(16vmin, -3.75vmin, 0vmin);
}
.cuboid:nth-child(32) {
        --width: 6.5;
        transform: translate3d(6.75vmin, -3.75vmin, 0vmin);
}
.cuboid:nth-child(33) {
        --width: 6.5;
        transform: translate3d(-1.25vmin, -3.75vmin, 0vmin);
}
.cuboid:nth-child(34) {
        --width: 6.5;
        transform: translate3d(-9.25vmin, -3.75vmin, 0vmin);
}
.cuboid:nth-child(35) {
        --width: 6.5;
        transform: translate3d(-17.25vmin, -3.8vmin, 0vmin);
}
.cuboid:nth-child(36) {
        --width: 17.75;
        transform: translate3d(-34.25vmin, -4.25vmin, 0vmin);
}
.cuboid:nth-child(37) {
        --width: 3.25;
        transform: translate3d(-46.65vmin, -2.25vmin, 0vmin);
}
.cuboid:nth-child(38) {
        --width: 22;
        transform: translate3d(35.5vmin, -0.8vmin, 0vmin);
}
.cuboid:nth-child(39) {
        --width: 11;
        transform: translate3d(-34vmin, -1vmin, 0vmin);
}
.cuboid:nth-child(40) {
        --width: 3.25;
        transform: translate3d(-46.65vmin, 1.35vmin, 0vmin);
}
.cuboid:nth-child(41) {
        --width: 3.75;
        transform: translate3d(-41.35vmin, 1.35vmin, 0vmin);
}
.cuboid:nth-child(42) {
        --width: 7.8;
        transform: translate3d(-29.3vmin, 1.65vmin, 0vmin);
}
.cuboid:nth-child(43) {
        --width: 11;
        transform: translate3d(30.5vmin, 2vmin, 0vmin);
}
.cuboid:nth-child(44) {
        --width: 7.6;
        transform: translate3d(31.75vmin, 5vmin, 0vmin);
}
.cuboid:nth-child(45) {
        --width: 7.8;
        transform: translate3d(16vmin, 5vmin, 0vmin);
}
.cuboid:nth-child(46) {
        --width: 6.5;
        transform: translate3d(6.75vmin, 5vmin, 0vmin);
}
.cuboid:nth-child(47) {
        --width: 6.5;
        transform: translate3d(-1.25vmin, 5vmin, 0vmin);
}
.cuboid:nth-child(48) {
        --width: 6.5;
        transform: translate3d(-9.25vmin, 5vmin, 0vmin);
}
.cuboid:nth-child(49) {
        --width: 6.5;
        transform: translate3d(-17.25vmin, 5vmin, 0vmin);
}
.cuboid:nth-child(50) {
        --width: 11;
        transform: translate3d(14vmin, 8vmin, 0vmin);
}
.cuboid:nth-child(51) {
        --width: 9.5;
        transform: translate3d(2.1vmin, 8vmin, 0vmin);
}
.cuboid:nth-child(52) {
        --width: 16;
        transform: translate3d(-12.5vmin, 8vmin, 0vmin);
}
.cuboid:nth-child(53) {
        --width: 5.35;
        transform: translate3d(23.75vmin, 11.25vmin, 0vmin);
}
.cuboid:nth-child(54) {
        --width: 8;
        transform: translate3d(15.25vmin, 11.25vmin, 0vmin);
}
.cuboid:nth-child(55) {
        --width: 4.5;
        transform: translate3d(7.5vmin, 11.25vmin, 0vmin);
}
.cuboid:nth-child(56) {
        --width: 14;
        transform: translate3d(-3.7vmin, 11.25vmin, 0vmin);
}
.cuboid:nth-child(57) {
        --width: 5;
        transform: translate3d(-14.8vmin, 11.25vmin, 0vmin);
}
.cuboid:nth-child(58) {
        --width: 5;
        transform: translate3d(-24.35vmin, 11.25vmin, 0vmin);
}
.cuboid:nth-child(59) {
        --width: 11.5;
        transform: translate3d(23.65vmin, 14.4vmin, 0vmin);
}
.cuboid:nth-child(60) {
        --width: 10.85;
        transform: translate3d(7.275vmin, 14vmin, 0vmin);
}
.cuboid:nth-child(61) {
        --width: 8.5;
        transform: translate3d(-10.35vmin, 14vmin, 0vmin);
}
.cuboid:nth-child(62) {
        --width: 32.75;
        transform: translate3d(15.5vmin, 17.4vmin, 0vmin);
}
.cuboid:nth-child(63) {
        --width: 8;
        transform: translate3d(-13.25vmin, 16.85vmin, 0vmin);
}
.cuboid:nth-child(64) {
        --width: 4.85;
        transform: translate3d(-30.75vmin, 17.15vmin, 0vmin);
}
.cuboid:nth-child(65) {
        --width: 17.8;
        transform: translate3d(26.65vmin, 20.15vmin, 0vmin);
}
.cuboid:nth-child(66) {
        --width: 14.5;
        transform: translate3d(9vmin, 20.15vmin, 0vmin);
}
.cuboid:nth-child(67) {
        --width: 14.5;
        transform: translate3d(-13.25vmin, 19.9vmin, 0vmin);
}
.cuboid:nth-child(68) {
        --width: 11.15;
        transform: translate3d(-31.1vmin, 20.15vmin, 0vmin);
}
.cuboid:nth-child(69) {
        --width: 18;
        transform: translate3d(29.9vmin, 23.1vmin, 0vmin);
}
.cuboid:nth-child(70) {
        --width: 11;
        transform: translate3d(10.5vmin, 23.25vmin, 0vmin);
}
.cuboid:nth-child(71) {
        --width: 20.25;
        transform: translate3d(-13.25vmin, 22.85vmin, 0vmin);
}
.cuboid:nth-child(72) {
        --width: 14.5;
        transform: translate3d(-32.5vmin, 23.25vmin, 0vmin);
}
.cuboid:nth-child(73) {
        --width: 24.85;
        transform: translate3d(30.175vmin, 26vmin, 0vmin);
}
.cuboid:nth-child(74) {
        --width: 14.5;
        transform: translate3d(9vmin, 26vmin, 0vmin);
}
.cuboid:nth-child(75) {
        --width: 17.25;
        transform: translate3d(-14.85vmin, 26vmin, 0vmin);
}
.cuboid:nth-child(76) {
        --width: 17.85;
        transform: translate3d(-34.25vmin, 26vmin, 0vmin);
}
.cuboid:nth-chil.........完整代码请登录后点击上方下载按钮下载查看