div+css实现三维立体金字塔旋转动画效果代码-html代码-BFW代码库

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

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

<head>

  <meta charset="UTF-8">

  
  
  
  
<style>
body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  background-image: radial-gradient(#00b3b3, #003434);
  overflow: hidden;
  perspective: 1000px;
}
body .scene, body .scene * {
  transform-style: preserve-3d;
}
body .scene {
  position: relative;
  width: 50vw;
  height: 50vw;
  margin-top: -40%;
  transform: rotateX(-10deg) rotateY(10deg) scale3d(1, 1, 1);
  animation: rot 20s ease-in-out infinite alternate;
}
@keyframes rot {
  to {
    transform: rotateX(-20deg) rotateY(360deg) scale3d(1, 1, 1);
  }
}
body .scene::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: #0005;
  box-shadow: inset 0 0 3vw #001a1a;
  border-radius: 20%;
  transform: rotateX(90deg) translateZ(calc(50vw / -2)) scale(1);
}
body .scene .pyramid, body .scene .pyramid * {
  position: absolute;
  bottom: 0;
}
body .scene #pyramid-1 {
  transform: translate3d(22vw, 0, 5vw);
  width: 20vw;
  height: 20vw;
}
body .scene #pyramid-1 .container span {
  border-bottom: 10px solid #0008;
}
body .scene #pyramid-1 .container::after {
  box-shadow: 0 0 10vw #0008;
}
body .scene #pyramid-1 .container {
  position: relative;
  width: 100%;
  height: 100%;
}
body .scene #pyramid-1 .container::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: teal;
  transform: rotateX(90deg) translateZ(-10vw);
}
body .scene #pyramid-1 .container * {
  position: absolute;
  bottom: 0;
}
body .scene #pyramid-1 .container span:nth-child(1) {
  width: 20vw;
  height: 20vw;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background-color: #006767;
  background-image: linear-gradient(90deg, teal, #004d4d);
  transform-origin: bottom;
  transform: rotateX(90deg) rotateZ(45deg) translateY(-30vw) translateY(20vw) rotateX(-119.5deg);
}
body .scene #pyramid-1 .container span:nth-child(2) {
  width: 20vw;
  height: 20vw;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background-color: #004d4d;
  background-image: linear-gradient(90deg, teal, #004d4d);
  transform-origin: bottom;
  transform: rotateX(90deg) rotateZ(90deg) translateY(-30vw) translateY(20vw) rotateX(-119.5deg);
}
body .scene #pyramid-1 .container span:nth-child(3) {
  width: 20vw;
  height: 20vw;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background-color: #003434;
  background-image: linear-gradient(90deg, teal, #004d4d);
  transform-origin: bottom;
  transform: rotateX(90deg) rotateZ(135deg) translateY(-30vw) translateY(20vw) rotateX(-119.5deg);
}
body .scene #pyramid-1 .container span:nth-child(4) {
  width: 20vw;
  height: 20vw;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background-color: #001a1a;
  background-image: linear-gradient(90deg, teal, #004d4d);
  transform-origin: bottom;
  transform: rotateX(90deg) rotateZ(180deg) translateY(-30vw) translateY(20vw) rotateX(-119.5deg);
}
body .scene #pyramid-1 .container span:nth-child(5) {
  width: 20vw;
  height: 20vw;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background-color: #000101;
  background-image: linear-gradient(90deg, teal, #004d4d);
  transform-origin: bottom;
  transform: rotateX(90deg) rotateZ(225deg) translateY(-30vw) translateY(20vw) rotateX(-119.5deg);
}
body .scene #pyramid-1 .container span:nth-child(6) {
  width: 20vw;
  height: 20vw;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background-color: black;
  background-image: linear-gradient(90deg, teal, #004d4d);
  transform-origin: bottom;
  transform: rotateX(90deg) rotateZ(270deg) translateY(-30vw) translateY(20vw) rotateX(-119.5deg);
}
body .scene #pyramid-1 .container span:nth-child(7) {
  width: 20vw;
  height: 20vw;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background-color: black;
  background-image: linear-gradient(90deg, teal, #004d4d);
  transform-origin: bottom;
  transform: rotateX(90deg) rotateZ(315deg) translateY(-30vw) translateY(20vw) rotateX(-119.5deg);
}
body .scene #pyramid-1 .container span:nth-child(8) {
  width: 20vw;
  height: 20vw;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background-color: black;
  background-image: linear-gradient(90deg, teal, #004d4d);
  transform-origin: bottom;
  transform: rotateX(90deg) rotateZ(360deg) translateY(-30vw) translateY(20vw) rotateX(-119.5deg);
}
body .scene #pyramid-2 {
  transform: translate3d(5vw, 0, 15vw);
  width: 10vw;
  height: 10vw;
}
body .scene #pyramid-2 .container::after {
  box-shadow: 0 0 5vw #0008;
}
body .scene #pyramid-2 .container {
  position: relative;
  width: 100%;
  height: 100%;
}
body .scene #pyramid-2 .container::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: gray;
  transform: rotateX(90deg) translateZ(-5vw);
}
body .scene #pyramid-2 .container * {
  position: absolute;
  bottom: 0;
}
body .scene #pyramid-2 .container span:nth-child(1) {
  width: 10vw;
  height: 10vw;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background-color: #737373;
  background-image: linear-gradient(90deg, gray, #676767);
  transform-origin: bottom;
  transform: rotateX(90deg) rotateZ(90deg) translateY(-15vw) translateY(10vw) rotateX(-119.5deg);
}
body .scene #pyramid-2 .container span:nth-child(2) {
  width: 10vw;
  height: 10vw;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background-color: #676767;
  background-image: linear-gradient(90deg, gray, #676767);
  transform-origin: bottom;
  transform: rotateX(90deg) rotateZ(180deg) translateY(-15vw) translateY(10vw) rotateX(-119.5deg);
}
body .scene #pyramid-2 .container span:nth-child(3) {
  width: 10vw;
  height: 10vw;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background-color: #5a5a5a;
  background-image: linear-gradient(90deg, gray, #676767);
  transform-origin: bottom;
  transform: rotateX(90deg) rotateZ(270deg) translateY(-15vw) translateY(10vw) rotateX(-119.5deg);
}
body .scene #pyramid-2 .container span:nth-child(4) {
  width: 10vw;
  height: 10vw;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background-color: #4d4d4d;
  background-image: linear-gradient(90deg, gray, #676767);
  transform-origin: bottom;
  transform: rotateX(90deg) rotateZ(360deg) translateY(-15vw) translateY(10vw) rotateX(-119.5deg);
}
body .scene #pyramid-3 {
  transform: translate3d(5vw, 0, -12vw);
  width: 14vw;
  height: 14vw;
}
body .scene #pyramid-3 .container span {
  border-bottom: 10px solid #0008;
}
body .scene #pyramid-3 .container::after {
  box-shadow: 0 0 10vw #0008;
}
body .scene #pyramid-3 .container {
  position: relative;
  width: 100%;
  height: 100%;
}
body .scene #pyramid-3 .container::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: darkslategray;
  transform: rotateX(90deg) translateZ(-7vw);
}
body .scene #pyramid-3 .container * {
  position: absolute;
  bottom: 0;
}
body .scene #pyramid-3 .container span:nth-child(1) {
  width: 14vw;
  height: 14vw;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background-color: #253f3f;
  background-image: linear-gradient(90deg, darkslategray, #1c2f2f);
  transform-origin: bottom;
  transform: rotateX(90deg) rotateZ(22.5deg) translateY(-21vw) translateY(14vw) rotateX(-119.5deg);
}
body .scene #pyramid-3 .container span:nth-child(2) {
  width: 14vw;
  height: 14vw;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background-color: #1c2f2f;
  background-image: linear-gradient(90deg, darkslategray, #1c2f2f);
  transform-origin: bottom;
  transform: rotateX(90deg) rotateZ(45deg) translateY(-21vw) translateY(14vw) rotateX(-119.5deg);
}
body .scene #pyramid-3 .container span:nth-child(3) {
  width: 14vw;
  height: 14vw;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background-color: #121f1f;
  background-image: linear-gradient(90deg, darkslategray, #1c2f2f);
  transform-origin: bottom;
  transform: rotateX(90deg) rotateZ(67.5deg) translateY(-21vw) translateY(14vw) rotateX(-119.5deg);
}
body .scene #pyramid-3 .container span:nth-child(4) {
  width: 14vw;
  height: 14vw;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background-color: #090f0f;
  background-image: linear-gradient(90deg, darkslategray, #1c2f2f);
  transform-origin: bottom;
  transform: rotateX(90deg) rotateZ(90deg) translateY(-21vw) translateY(14vw) rotateX(-119.5deg);
}
body .scene #pyramid-3 .container span:nth-child(5) {
  width: 14vw;
  height: 14vw;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background-color: black;
  background-image: linear-gradient(90deg, darkslategray, #1c2f2f);
  transform-origin: bottom;
  transform: rotateX(90deg) rotateZ(112.5deg) translateY(-21vw) translateY(14vw) rotateX(-119.5deg);
}
body .scene #pyramid-3 .container span:nth-child(6) {
  width: 14vw;
  height: 14vw;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background-color: black;
  background-image: linear-gradient(90deg, darkslategray, #1c2f2f);
  transform-origin: bottom;
  transform: rotateX(90deg) rotateZ(135deg) translateY(-21vw) translateY(14vw) rotateX(-119.5deg);
}
body .scene #pyramid-3 .container span:nth-child(7) {
  width: 14vw;
  height: 14vw;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background-color: black;
  background-image: linear-gradient(90deg, darkslategray, #1c2f2f);
  transform-origin: bottom;
  transform: rotateX(90deg) rotateZ(157.5deg) translateY(-21vw) translateY(14vw) rotateX(-119.5deg);
}
body .scene #pyramid-3 .container span:nth-child(8) {
  width: 14vw;
  height: 14vw;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background-color: black;
  background-image: linear-gradient(90deg, darkslategray, #1c2f2f);
  transform-origin: bottom;
  transform: rotateX(90deg) rotateZ(180deg) translateY(-21vw) translateY(14vw) rotateX(-119.5deg);
}
body .scene #pyramid-3 .container span:nth-child(9) {
  width: 14vw;
  height: 14vw;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background-color: black;
  background-image: linear-gradient(90deg, darkslategray, #1c2f2f);
  transform-origin: bottom;
  transform: rotateX(90deg) rotate.........完整代码请登录后点击上方下载按钮下载查看