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;
	transfo.........完整代码请登录后点击上方下载按钮下载查看