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

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

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