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