div+css实现立体金字塔图表示意图旋转动画代码-html代码-BFW代码库

div+css实现立体金字塔图表示意图旋转动画代码

代码语言：html

所属分类：图表

代码描述：div+css实现立体金字塔图表示意图旋转动画代码

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

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    * {
  box-sizing: content-box;
}

body {
  background: #fffdf1;
}

.box {
  position: relative;
  width: 500px;
  height: 500px;
  margin: 0 auto;
}
/* ------------ 0 ------------ */
.pyramid {
  width: 200px;
  height: 200px;
  margin: 3em auto -2rem;
  position: absolute;
  left: 50%;
  perspective-origin: center -75%;
}

.pyramid__inner {
  transform-style: preserve-3d;  
   transform: translateZ(-150px) translateX(-70%) rotateY(360deg); 
  
-webkit-animation: Anim 15s linear infinite; 
  
        animation: Anim 15s linear infinite;
}

@-webkit-keyframes Anim {
  0% { transform: translateZ(-150px) translateX(-75%) rotateY(0deg); }
  50% { transform: translateZ(-150px) translateX(75%) rotateY(180deg); }
  100% { transform: translateZ(-150px) translateX(-75%) rotateY(360deg); }
}

@keyframes Anim {
  0% { transform: translateZ(-150px) translateX(-75%) rotateY(0deg); }
  50% { transform: translateZ(-150px) translateX(75%) rotateY(180deg); }
  100% { transform: translateZ(-150px) translateX(-75%) rotateY(360deg); }
} 

.bit {
  position: absolute;
  height: 0;
  border-right: 100px solid transparent;
  border-left: 100px solid transparent;
  opacity: .92;
}


.py-1 {
  /* transform: scale(.485) translateX(4rem) translateY(11.25rem); */
  transform: scale(.485);
  perspective: 5000px;
  z-index: 3;
  
  top: 0;
}

.py-2 {
 /*  transform: scale(.72) translateX(1.5rem) translateY(1.25rem); */
  transform: scale(.72);
  perspective: 2900px;
  z-index: 2;
  
  top: 140px;
}

.py-3 {
  transform: scale(1.2);
  perspective: 1000px;
  z-index: 1;
  
  top: 340px;
}

/* ------------ 1 ------------ */
.py-1 .bit {
  width: 0px;
}

.py-1 .bit-1 {
  border-bottom: 200px solid #9d492c;
}

.py-1 .bit-2,
.py-1 .bit-3,
.py-1 .bit-4 {
  border-bottom: 200px solid #c87154;
}

.py-1  .bit-1 {
  transform: rotateX(30deg) translateZ(57px);  
}

.py-1  .bit-2 {
  transform: rotateX(-30deg) translateZ(-57px);    
}

.py-1  .bit-3 {
  transform: rotateZ(-30deg) rotateY(-90deg) translateZ(-57px);
}

.py-1  .bit-4 {
  transform:  rotateZ(30deg) rotateY(90deg) translateZ(-57px);
}

/* ------------ 2 ------------ */
.py-2 .bit {
  width: 140px;
  border-right: 75px solid transparent;
  border-left: 75px solid transparent;
}

.py-2 .bit-1{
  border-bottom: 150px solid #fe8c1c;
}

.py-2 .bit-2,
.py-2 .bit-3,
.py-2 .bit-4 {
  border-bottom: 150px solid #ffad3e;
}

.py-2  .bit-1 {
  transform: rotateX(30deg) translateZ(122px);  
}

.py-2  .bit-2 {
  transform: rotateX(-30deg) translateZ(-122px);    
}

.py-2  .bit-3 {
  transform: rotateZ(-30deg) rotateY(-90deg) translateZ(-122px);
}

.py-2  .bit-4 {
  transform:  rotateZ(30deg) rotateY(90deg) translateZ(-122px);
}

.py-2 .bit-5 {
  position: absolute;
  background: #fe8c1c;
  width: 140px;
  height: 140px;
  z-index: 10;
  transform: rotateX(90deg) translateX(75px) translateY(0px) translateZ(121px);
}

/* ------------ 3 ------------ */
.py-3 .bit {
  width: 200px;
  bord.........完整代码请登录后点击上方下载按钮下载查看