css实现三维埃及金字塔内部示意图效果代码-html代码-BFW代码库

代码语言：html
所属分类：三维
代码描述：css实现三维埃及金字塔内部示意图效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
:root {
	--king-color: #03a9f450;
	--queen-color: #f443363b;
	--unfinished-color: #03fff450;
	--border-side: 0.1vmin solid #ffffff40;
}

body {
	margin: 0;
	padding: 0;
	background: radial-gradient(#000000, #ffffff99);
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100vw;
	height: 100vh;
	perspective: 100vmin;
}

/*** PYRAMID ***/

.pyramid {
	width: 50vmin;
	height: 50vmin;
	transform: rotateX(65deg) rotateZ(20deg);
	transform-style: preserve-3d;
	animation: spin 25s linear 0s infinite;
	background: repeating-linear-gradient(
			45deg,
			#26262620 0 0.5vmin,
			#31313140 0 1vmin
		),
		repeating-linear-gradient(-45deg, #26262620 0 0.5vmin, #31313140 0 1vmin);
}

@keyframes spin {
	0% {
		transform: rotateX(65deg) rotateZ(20deg);
	}
	25% {
		transform: rotateX(65deg) rotateZ(200deg);
	}
	50% {
		transform: rotateX(90deg) rotateZ(380deg);
	}
	75% {
		transform: rotateX(65deg) rotateZ(560deg);
	}
	100% {
		transform: rotateX(65deg) rotateZ(740deg);
	}
}

.pyramid:before {
	content: "";
	background: black;
	width: 100%;
	height: 100%;
	position: absolute;
	transform: translateZ(-10vmin);
	box-shadow: 0 0 2vmin 2vmin #000000;
	opacity: 0.15;
}

.pyramid:after {
	width: 16vmin;
	height: 7vmin;
	position: absolute;
	transform: translate3d(43.55vmin, 21.5vmin, -0.15vmin) rotate(180deg);
	border-radius: 100%;
	color: #dadada;
	text-align: center;
	letter-spacing: -0.25em;
	text-shadow: 0 0 1px #fff;
	font-family: Arial, Helvetica, serif;
	padding: 0;
	box-sizing: border-box;
	font-size: 2em;
	opacity: 0;
	transition: opacity 0.5s ease 0s;
	content: "z \A \2000 \A \25C0 \A \25B7";
}

.pyramid > span {
	width: 100%;
	height: 40vmin;
	position: absolute;
	box-sizing: border-box;
	background-color: #efefef;
	background-image: linear-gradient(335deg, #ffffff 6px, transparent 6px),
		linear-gradient(155deg, #ffffff 6px, transparent 6px),
		linear-gradient(335deg, #ffffff 6px, transparent 6px),
		linear-gradient(155deg, #ffffff 6px, transparent 6px);
	background-size: 14px 14px;
	background-position: 0px 0px, 1px 8px, 7px 7px, 8px 1px;
	clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
	opacity: 0.15;
	transition: opacity 0.5s ease 0s;
}

.pyramid > span:nth-child(1) {
	transform: rotateX(-51.25deg);
	transform-origin: center bottom;
	bottom: 0;
}

.pyramid > span:nth-child(2) {
	transform: rotateY(51.25deg) rotateZ(-90deg)
		translate3d(20vmin, -20vmin, 0vmin);
	transform-origin: right center;
	right: 0;
	filter: brightness(0.875);
}

.pyramid > span:nth-child(3) {
	transform: rotateX(51.25deg) rotateZ(180deg) translate3d(0vmin, -40vmin, 0vmin);
	transform-origin: center top;
	top: 0;
}

.pyramid > span:nth-child(4) {
	transform: rotateY(-51.25deg) rotateZ(90deg)
		translate3d(-20vmin, -20vmin, 0vmin);
	transform-origin: left center;
	left: 0;
	filter: brightness(0.875);
}

.pyramid > span:before {
	content: "";
	background: #ffd400;
	width: 100%;
	height: 3vmin;
	position: absolute;
}

.pyramid:hover > span {
	opacity: 0.075;
}

.pyramid > div {
	position: absolute;
}

/*** KING ***/

.king {
	width: 2vmin;
	height: 3vmin;
	background: var(--king-color);
	transform-style: preserve-3d;
	left: calc(50% - 4.5vmin);
	top: calc(50% - 1.5vmin);
	transform: translateZ(11vmin);
}

.king .side {
	position: absolute;
	width: 100%;
	height: 100%;
	border: var(--border-side);
	background: var(--king-color);
	box-sizing: border-box;
}

.king .side:nth-child(1) {
	transform: rotateX(90deg) translate3d(0px, 1.5vmin, 1.5vmin);
}

.king .side:nth-child(2) {
	transform: rotateX(0deg) translate3d(0, 0, 3vmin);
}

.king .side:nth-child(3) {
	transform: rotateY(-90deg) translate3d(1.5vmin, 0, 1.5vmin);
	width: 150%;
}

.king .side:nth-child(4) {
	transform: rotateX(-90deg) translate3d(0, -1.5vmin, 1.5vmin);
	transform-style: preserve-3d;
}

.king .side:nth-child(5) {
	transform: rotateY(90deg) translate3d(-1.5vmin, 0, 0.5vmin);
	width: 150%;
}

.king .side:nth-child(6) {
	transform: rotateY(0deg) translate3d(0, 0, 4vmin);
	transform-style: preserve-3d;
}

.king .side:nth-child(6):before,
.king .side:nth-child(6):after {
	content: "";
	background: var(--king-color);
	width: calc(100% + 0.015vmin);
	height: calc(100% + 0.03vmin);
	position: absolute;
	transform: translate3d(0, 0, 1vmin);
	border: var(--border-side);
	left: -0.15vmin;
	top: -0.15vmin;
}

.king .side:nth-child(6):after {
	transform: translate3d(0, 0, 2vmin);
}

.king .side:nth-child(3):before,
.king .side:nth-child(5):before {
	content: "";
	background: var(--king-color);
	width: 130%;
	height: 100%;
	position: absolute;
	left: 2.75vmin;
	border: var(--border-side);
	top: -0.15vmin;
}

.king .side:nth-child(5):before {
	left: -4vmin;
}

/*** king roof ***/

.king .roof,
.king .roof span {
	background: #ff000000;
	width: 100%;
	height: 100%;
	transform: translate3d(0, 0, 7vmin);
	transform-style: preserve-3d;
}

.king .roof:before,
.king .roof:after,
.king .roof span:before,
.king .roof span:after {
	background: var(--king-color);
	width: 100%;
	height: 100%;
	transform: rotateY(45deg) translateX(0.5vmin) translateZ(0.5vmin);
	content: "";
	position: absolute;
	border: var(--border-side);
	box-sizing: border-box;
}

.king .roof:after,
.king .roof span:after {
	transform: rotateY(-45deg) translateX(-0.5vmin) translateZ(0.5vmin);
}

.king .roof span {
	transform: translate3d(0, 0, 0.75vmin);
	position: absolute;
}

/*** king chanels ***/

.king-channel-left,
.king-channel-right {
	background: var(--king-color);
	width: 9vmin;
	height: 0.25vmin;
	transform: rotateY(45deg) translate3d(-1vmin, 26vmin, 19vmin);
	transform-style: preserve-3d;
}

.king-channel-left:before,
.king-channel-right:before {
	content: "";
	background: var(--king-color);
	width: 100%;
	height: 0.25vmin;
	transform: rotateX(90deg);
	position: absolute;
}

.king-channel-right {
	width: 13vmin;
	transform: rotateY(-45deg) translate3d(27vmin, 26vmin, -4vmin);
}

/*** king antechamber ***/

.antechamber {
	width: 1vmin;
	height: 1vmin;
	background: var(--king-color);
	transform-style: preserve-3d;
	left: calc(50% - 2.5vmin);
	top: calc(50% - -0.5vmin);
	transform: translateZ(11vmin);
}

.antechamber .side {
	position: absolute;
	width: 100%;
	height: 100%;
	border: var(--border-side);
	background: var(--king-color);
	box-sizing: border-box;
}

.antechamber .side:nth-child(1) {
	transform: rotateX(90deg) translate3d(0px, 0.5vmin, 0.5vmin);
}

.antechamber .side:nth-child(2) {
	transform: rotateX(0deg) translate3d(0, 0, 1vmin);
}

.antechamber .side:nth-child(3) {
	transform: rotateY(-90deg) translate3d(0.5vmin, 0, 0.5vmin);
}

.antechamber .side:nth-child(4) {
	transform: rotateX(-90deg) translate3d(0, -0.5vmin, 0.5vmin);
}

.antechamber .side:nth-child(5) {
	transform: rotateY(90deg) translate3d(-0.5vmin, 0, 0.5vmin);
}

.antechamber .side:nth-child(6) {
	transform: rotateY(0deg) translate3d(0, 0, 4vmin);
}

/*** GALLERY ***/

.gallery {
	transform-style: preserve-3d;
	background: var(--king-color);
	width: 15vmin;
	height: 1vmin;
	left: calc(50% + 2vmin);
	top: calc(50% + 2vmin);
	transform: rotateY(25deg) translateZ(8.5vmin) translateX(-7.75vmin)
		translateY(-1.5vmin);
	transform-origin: left;
	border: var(--border-side);
	box-sizing: border-box;
}

.gallery:before,
.gallery:after {
	position: absolute;
	content: "";
	background: var(--king-color);
	width: calc(100% + 0.3vmin);
	height: calc(200% + 0.3vmin);
	transform: rotateX(100deg) translate3d(-0.15vmin, 0.85vmin, 0vmin);
	border: var(--border-side);
	box-sizing: border-box;
}

.gallery:after {
	transform: rotateX(80deg) translate3d(-0.15vmin, 0.75vmin, 1vmin);
}

/*** QUEEN ***/

.queen {
	width: 2vmin;
	height: 2vmin;
	background: var(--queen-color);
	transform-style: preserve-3d;
	left: 50%;
	top: 50%;
	transform: translateZ(5vmin);
}

.queen .side {
	position: absolute;
	width: 100%;
	height: 100%;
	border: var(--border-side);
	background: var(--queen-color);
	box-sizing: border-box;
}

.queen .side:nth-child(1) {
	transform: rotateX(90deg) translate3d(0px, 1vmin, 1vmin);
}

.queen .side:nth-child(2) {
	transform: rotateX(0deg) translate3d(0, 0, 2vmin);
}

.queen .side:nth-child(3) {
	transform: rotateY(-90deg) translate3d(1vmin, 0, 1vmin);
}

.queen .side:nth-child(4) {
	transform: rotateX(-90deg) translate3d(0, -1vmin, 1vmin);
	transform-style: preserve-3d;
}

.queen .side:nth-child(5) {
	transform: rotateY(90deg) translate3d(-1vmin, 0, 1vmin);
}

/*** queen roof ***/

.queen .roof,
.queen .roof span {
	background: #ff000000;
	width: 100%;
	height: 100%;
	transform: translate3d(0, 0, 2.5vmin);
	transform-style: preserve-3d;
}

.queen .roof:before,
.queen .roof:after,
.queen .roof span:before,
.queen .roof span:after {
	background: var(--queen-color);
	width: 100%;
	height: 100%;
	transform: rotateY(45deg) translateX(0.5vmin) translateZ(0.5vmin);
	content: "";
	position: absolute;
	border: var(--border-side);
	box-sizing: border-box;
}

.queen .roof:after,
.queen .roof span:after {
	transform: rotateY(-45deg) translateX(-0.5vmin) translateZ(0.5vmin);
}

.queen .roof span {
	transform: translate3d(0, 0, 0.75vmin);
	transform-style: preserve-3d;
	position: absolute;
}

/*** queen passage ***/

.passage {
	transform-style: preserve-3d;
	background: var(--queen-color);
	width: 10vmin;
	height: 0.5vmin;
	left: calc(50% + 2vmin);
	top: calc(50% + 1vmin);
	transform: translateZ(5vmin);
	border: var(--border-side);
	box-sizing: border-box;
}

.passage:before,
.passage:after {
	position: absolute;
	content: "";
	background: var(--queen-color);
	width: 10vmin;
	height: 0.5vmin;
	left: calc(50% + 2vmin);
	top: calc(50% + 2vmin);
	transform: rotateX(90deg) translate3d(-7vmin, 0.25vmin, 2vmin);
	border: var(--border-side);
	box-sizing: border-box;
}

.passage:after {
	transform: rotateX(90deg) translate3d(-7vmin, 0.25vmin, 2.5vmin);
}

/*** queen chanels ***/

.queen-channel-left,
.queen-channel-right {
	background: var(--queen-color);
	width: 16.5vmin;
	height: 0.25vmin;
	transform: rotateY(45deg) translate3d(0vmin, 26.5vmin, 15.5vmin);
	transform-style: preserve-3d;
}

.queen-channel-left:before,
.queen-channel-right:before {
	content: "";
	background: var(--queen-color);
	width: 100%;
	height: 0.25vmin;
	transform: rotateX(90deg);
	position: absolute;
}

.queen-channel-right {
	width: 15vmin;
	transform: rotateY(-45deg) translate3d(24.5vmin, 26.5vmin, -10.25vmin);
}

/*** UNFINISHED CHAMBER	 ***/

.unfinished {
	width: 4vmin;
	height: 2vmin;
	background: var(--unfinished-color);
	transform-style: preserve-3d;
	left: calc(50% - 1vmin);
	top: calc(50% + 0.5vmin);
	transform: translateZ(-8vmin);
}

.unfinished .side {
	position: absolute;
	width: 100%;
	height: 100%;
	border: var(--border-side);
	background: var(--unfinished-color);
	box-sizing: border-box;
}

.unfinished .side:nth-child(1) {
	transform: rotateX(90deg) translate3d(0px, 1vmin, 1vmin);
}

.unfinished .side:nth-child(2) {
	transform: rotateX(0deg) translate3d(0, 0, 2vmin);
}

.unfinished .side:nth-child(3) {
	transform: rotateY(-90deg) translate3d(1vmin, 0, 1vmin);
	width: 2vmin;
}

.unfinished .side:nth-child(4) {
	transform: rotateX(-90deg) translate3d(0, -1vmin, 1vmin);
	transform-style: preserve-3d;
}

.unfinished .side:nth-child(5) {
	transform: rotateY(90deg) translate3d(-1vmin, 0, 3vmin);
	width: 2vmin;
}

/*** PASSAGES ***/

.ascending {
	transform-style: preserve-3d;
	background: #8bc34a80;
	width: 10vmin;
	height: 0.5vmin;
	left: calc(50% + 11.25vmin);
	top: calc(50% + 1.5vmin);
	transform: rotateY(25deg) translate3d(-1vmin, -0.5vmin, 2.75vmin);
	border: var(--border-side);
	box-sizing: border-box;
}

.ascending:before,
.ascending:after {
	position: absolute;
	content: "";
	background: #8bc34a80;
	width: 10vmin;
	height: 0.5vmin;
	left: calc(50% + 2vmin);
	top: calc(50% + 2vmin);
	transform: rotateX(90deg) translate3d(-7vmin, 0.25vmin, 2vmin);
	border: var(--border-side);
	box-sizing: border-box;
}

.ascending:after {
	transform: rotateX(90deg) translate3d(-7vmin, 0.25vmin, 2.5vmin);
}

.entrance {
	transform-style: preserve-3d;
	background: #8bc34a80;
	width: 23vmin;
	height: 0.5vmin;
	left: calc(50% + 18.5vmin);
	top: calc(50% + 1.5vmin);
	transform: translate3d(-17vmin, -0.5vmin, -3vmin) rotateY(-25deg);
	border: var(--border-side);
	box-sizing: border-box;
}

.entrance:before,
.entrance:after {
	position: absolute;
	background: #8bc34a80;
	content: "";
	width: 100%;
	height: 0.5vmin;
	left: calc(50% + 2vmin);
	top: calc(50% + 2vmin);
	transform: rotateX(90deg) translate3d(-13.25vmin, 0.25vmin, 2vmin);
	border: var(--border-side);
	box-sizing: border-box;
}

.entrance:after {
	transform: rotateX(90deg) translate3d(-13.25vmin, 0.25vmin, 2.5vmin);
}

.escape span {
	background: #ff980060;
	width: 9vmin;
	position: absolute;
	height: 0.25vmin;
	transform: rotateY(-55deg) translate3d(18vmin, 26vmin, -24vmin);
	transform-style: preserve-3d;
}
.escape span:before {
	content: "";
	background: #ff980060;
	width: 100%;
	height: 0.25vmin;
	transform: rotateX(90deg);
	position: absolute;
}

.escape span + span {
	width: 3.5vmin;
	transform: rotateY(-70deg) translate3d(6vmin, 26vmin, -29.3vmin);
}

/*** NAMES ***/

.king .side:nth-child(4):before,
.king .side:nth-child(4):after,
.queen .side:nth-child(4):before,
.unfinished .side:nth-child(4):before {
	content: "KING'S CHAMBER";
	font-size: 0.5em;
	color: #afdcff.........完整代码请登录后点击上方下载按钮下载查看