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

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

代码语言：html

所属分类：三维

代码描述：css实现一个三维3d金字塔旋转效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


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

<head>

  <meta charset="UTF-8">
  

  
<style>
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: 50vmin;
}

.pyramid {
	background: #d8d8d8;
	width: 30vmin;
	height: 30vmin;
	transform: rotateX(34deg) rotateZ(-73deg);
	transform-style: preserve-3d;
	animation: spin 8s linear 0s infinite;
}

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