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