css实现一个太阳金字塔三维旋转效果代码-html代码-BFW代码库

代码语言：html
所属分类：三维
代码描述：css实现一个太阳金字塔三维旋转效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">
  

  
<style>
:root {
	--brown1: #b59970;
  --brown2: #ab926d;
  --behind: #84735c;
	--stair1: #caab7d;
	--stair2: #887c6a;
	--stair3: #353535;
}

body {
	margin: 0;
	padding: 0;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100vw;
	height: 100vh;
	perspective: 100vmin;
	/*transform: scale(2);*/
	background: radial-gradient(#ff9800d4, #ffeb3bf2);
}



/*** PYRAMID ***/

.pyramid {
	width: 50vmin;
	height: 50vmin;
	transform: rotateX(65deg) rotateZ(20deg);
	transform-style: preserve-3d;
	animation: spin 15s linear 0s infinite;
	overflow: visible;
	box-shadow: 0 0 0.25vmin 0.15vmin var(--metal-color) inset;
	background: #795548;
	position: absolute;
	transition: all 0.5s ease 0s;
}

@keyframes spin {
	0% { transform: rotateX(65deg) rotateZ(20deg); }
	100% { transform: rotateX(65deg) rotateZ(380deg); }
}

.pyramid > span {
	width: 100%;
	height: 40vmin;
	position: absolute;
	box-sizing: border-box;
	background-color: var(--behind);
	background-image: 
		linear-gradient(335deg, var(--brown1) 6px, transparent 6px), 
		linear-gradient(155deg, var(--brown1) 6px, transparent 6px), 
		linear-gradient(335deg, var(--brown2) 6px, transparent 6px),
		linear-gradient(155deg, var(--brown2) 6px, transparent 6px);
	background-size: 14px 14px;
	background-position: 0px 0px, 1px 8px, 7px 7px, 8px 1px;
	clip-path: polygon(10.25% 85%, 89.75% 85%, 100% 100%, 0% 100%);
	transition: all 0.5s ease 0s;
}

.pyramid > span:nth-child(odd) {
	filter: brightness(0.75);
}

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

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

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

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

.pyramid > span:nth-child(5) {
	transform: rotateY(0deg) rotateZ(90deg) translate3d(-37.15%, -63.15%, 3.05vmin);
	transform-origin: left center;
	left: 0;
	clip-path: none;
	width: 79.5%;
	border-bottom: 0;
	filter: brightness(1.4);
	height: 79.5%;
}


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






/*** PYRAMID F2 ***/

.pyramid.f2 {
	margin-bottom: 6vmin;
	width: 38vmin;
	height: 38vmin;
}

.pyramid.f2 > span {
   clip-path: polygon(13.5% 85%, 86.5% 85%, 100% 100%, 0% 100%);
}

.pyramid.f2 > span:last-of-type {
	clip-path: none;
	width: 73.25%;
	height: 73.25%;
	transform: rotateY(0deg) rotateZ(90deg) translate3d(-31.9%, -68.5%, 3.05vmin);
}



/*** PYRAMID F3 ***/

.pyramid.f3 {
	margin-bottom: 12vmin;
	width: 26vmin;
	height: 26vmin;
}

.pyramid.f3 > span {
  clip-path: polygon(19.5% 85%, 80.5% 85%, 100% 100%, 0% 100%);
}

.pyramid.f3 > span:last-of-type {
	clip-path: none;
	width: 61.15%;
	height: 61.15%;
	transform: rotateY(0deg) rotateZ(90deg) translate3d(-18.25%, -81.75%, 3.05vmin);
}



/*** PYRAMID F4 ***/

.pyramid.f4 {
	margin-bottom: 17.75vmin;
	width: 14vmin;
	height: 14vmin;
}

.pyramid.f4 > span {
   clip-path: polygon(10.5% 95.5%, 89.5% 95.5%, 100% 100%, 0% 100%);
}

.pyramid.f4 > span:last-of-type {
	clip-path: none;
	width: 78%;
	height: 78%;
	transform: rotateY(0deg) rotateZ(90deg) translate3d(-36%, -63.75%, 0.925vmin);
}



/*** PYRAMID F5 ***/

.pyramid.f5 {
	margin-bottom: 19.75vmin;
	width: 10vmin;
	height: 10vmin;
}

.pyramid.f5 > span {
  clip-path: polygon(26.5% 92%, 72.5% 92%, 100% 100%, 0% 100%);
}

.pyramid.f5 > span:last-of-type {
	clip-path: none;
	width: 45%;
	height: 45%;
	transform: rotateY(0deg) rotateZ(90deg) translate3d(10.5%, -110.5%, 1.65vmin);
}




/*** PYRAMID F6 - TEMPLE ***/

.pyramid.f6 {
	margin-bottom: 23.05vmin;
	width: 3vmin;
	height: 3vmin;
}

.pyramid.f6 > span {
	clip-path: polygon(0% 95%, 90% 95%, 100% 100%, 0% 100%);
	clip-path: none;
	width: 3vmin;
	height: 1vmin;
}

.pyramid.f6 > span:nth-child(1) {
  transform: rotateX(-90deg);
}
.pyramid.f6 > span:nth-child(2) {
  transform: rotateY(90deg) rotateZ(-90deg) translate3d(0.5vmin, -0.5vmin, 0vmin);
}

.pyramid.f6 > span:nth-child(3) {
  transform: rotateX(90deg) rotateZ(180deg) translate3d(0vmin, -1vmin, 0vmin);
}

.pyramid.f6 > span:nth-child(4) {
  transform: rotateY(-90deg) rotateZ(90deg) translate3d(-0.5vmin, -0.5vmin, 0vmin);
}

.pyramid.f6 > span:before {
	content: "";
	background: #424242;
	width: 1vmin;
	height: 0.7vmin;
	position: absolute;
	bottom: 0;
	left: calc(50% - 0.5vmin);
}

.pyramid.f6 > span:last-of-type {
	clip-path: none;
	width: 100%;
	height: 100%;
	transform: rotateY(0deg) rotateZ(90deg) translate3d(-50%, -50%, 1vmin);
}

.pyramid.f6 > span:last-of-type:before {
	display: none;
}










/*** STAIRS ***/

.pyramid.f1 > span:nth-child(2):before, .pyramid.f1 > span:nth-child(2):after, .pyramid.f2 > span:nth-child(2):before, .pyramid.f3 > span:nth-child(2):before, .pyramid.f3 > span:nth-child(2):after, .pyramid.f4 > span:nth-child(2):before, .pyramid.f5 > span:nth-child(2):before,
.flatcube.f0 > span:nth-child(1):before,
.flatcube.f0 > span:nth-child(4):before {
	content: "";
	height: 6vmin;
	bottom: 0;
	background: repeating-linear-gradient(0deg, var(--stair2) 0, var(--stair2) 0.15vmin, var(--stair3) 0.38vmin);
	width: 3vmin;
	position: absolute;
	left: calc(50% - 2vmin);
	border-right: 0.5vmin solid var(--stair1);
	border-left: 0.5vmin solid var(--stair1);
}

.pyramid.f1 > span:nth-child(2):before, .pyramid.f1 > span:nth-child(2):after {
	width: 1.25vmin;
	transform: rotate(15deg);
	background: repeating-linear-gradient(-15deg, var(--stair2) 0, var(--stair2) 0.15vmin, var(--stair3) 0.38vmin);
	height: 8vmin;
	bottom: -1vmin;
	left: calc(50% - 6vmin);
}
.pyramid.f1 > span:nth-child(2):after {
	width: 1.25vmin;
	transform: rotate(-15deg);
	background: repeating-linear-gradient(15deg, var(--stair2) 0, var(--stair2) 0.15vmin, var(--stair3) 0.378vmin);
	height: 8vmin;
	bottom: -1vmin;
	left: calc(50% + 3.85vmin);
}

.pyramid.f3 > span:nth-child(2):before, .pyramid.f3 > span:nth-child(2):after {
  width: 0.5vmin;
}
.pyramid.f3 > span:nth-child(2):after {
  left: calc(50% + 0.75vmin);
}
.pyramid.f4 > span:nth-child(2):before {
  left: calc(50% - 0.875vmin);
  width: 0.75vmin;
}
.pyramid.f5 > span:nth-child(2):before {
  left: calc(50% - 0.75vmin);
  width: 0.5vmin;
}


.flatcube.f0 > span:nth-child(1):before,
.flatcube.f0 > span:nth-child(4):before {
	left: 50%;
	width: 0.35vmin;
	height: 2.25vmin;
	border-width: 0.35vmin;
}





/*** OPTIONS ***/

input[type="checkbox"] {
	display: none;
}

input:checked + label,
label:hover {
	opacity: 1;
}

input:checked + label:hover {
	opacity: 0.9;
}

label {
	position: absolute;
	bottom: 2vmin;
	left: 0;
	z-index: 1;
	cursor: pointer;
	font-family: Arial, Helvetica, serif;
	background: #fff;
	width: 9vmin;
	height: 7.75vmin;
	opacity: 0.75;
	clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
}

label > span {
	font-size: 1.25vmin;
	text-transform: uppercase;
	background: #777;
	padding: 0.5vmin 0;
	width: 100%;
	float: left;
	bottom: 0;
	text-align: center;
	position: absolute;
	color: #fff;
	text-shadow: 0px 0px 2px #000000;
}

input:checked + label > span {
	background: #333;
}

input:checked + label > span:before {
	border-bottom-color: #333;
}

label span + span,
input:checked + label span {
	display: none;
}

input:checked + label span:nth-child(2) {
	display: block;
}



label:hover span:first-of-type {
    display: none;
}

label:hover span:last-of-type {
    display: block;
}



input:checked + label:hover span:first-of-type {
  display: block;
}
input:checked + label:hover span:last-of-type {
  display: none;
}


label span em {
	font-style: normal;
  display: none;
}





/*** play-pause ***/

label[for="play-pause"] {
	left: calc(50% - 13.5vmin);
}

label[for="play-pause"]:before {
	content: "\25BA";
	color: #888;
	font-size: 2.5vmin;
	width: 100%;
	left: 0;
	position: absolute;
	text-align: center;
	line-height: 6.5vmin;
	transform: scaleX(0.75);
	text-indent: 0.35vmin;
}

label[for="play-pause"]:hover:before {
	content: "\2590\A0\258C";
	font-size: 1.35vmin;
	transform: none;
	text-indent: 0;
}

input:checked + label[for="play-pause"]:hover:before {
	content: "\25BA";
	font-size: 2.5vmin;
	transform: scaleX(0.75);
	text-indent: 0.35vmin;
}

input:checked + label[for="play-pause"]:before {
	content: "\2590\A0\258C";
	color: #333333;
	font-size: 1.35vmin;
	transform: none;
	text-indent: 0;
}

input#play-pause:checked ~ .pyramid {
	animation-play-state: paused;
}

label[for="play-pause"] span em {
  display: inline-block;
}

label[for="play-pause"]:hover span em {
  display: none;
}

input#play-pause:checked + label span em {
  display: inline-block;
}

input#play-pause:checked:hover + label span em {
  display: none;
}



/*** original-stretch ***/

label[for="original-stretch"] {
  left: calc(50% + 4.5vmin);
}

label[for="original-stretch"]:before {
	content: "\25B2";
	color: #888888;
	width: 100%;
	left: 0;
	position: absolute;
	text-align: center;
	font-size: 2.15vmin;
	line-height: 6.25vmin;
	transform: scaleY(0.75) scaleX(1.25);
}

input:checked + label[for=&quo.........完整代码请登录后点击上方下载按钮下载查看