div+cs实现三维旋转桌子效果代码-html代码-BFW代码库

代码语言：html
所属分类：三维
代码描述：div+cs实现三维旋转桌子效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">

  
  
  
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  background-color: #111;
  background-image: radial-gradient(#222, #111);
  overflow: hidden;
  perspective: 1000px;
}
body .scene, body .scene * {
  transform-style: preserve-3d;
}
body .scene {
  position: relative;
  width: 70vmin;
  height: 20vmin;
  transform: rotateX(-20deg) rotateY(10deg) scale3d(1, 1, 1);
  animation: rot 20s ease-in-out 0s infinite alternate;
}
@keyframes rot {
  to {
    transform: rotateX(0deg) rotateY(440deg) scale3d(1, 1, 1);
  }
}
body .scene::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: -100;
  transform: rotateX(90deg) scale(1);
}
body .scene .cube, body .scene .cube *, body .scene .cylinder, body .scene .cylinder * {
  position: absolute;
  bottom: 0;
}
body .scene ._face {
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
}
body .scene #ground {
  z-index: -50;
  width: 70vmin;
  height: 3vmin;
  transform: translateY(3vmin);
}
body .scene #ground .container {
  position: relative;
  width: 100%;
  height: 100%;
}
body .scene #ground .container * {
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
body .scene #ground .container .left {
  width: 70vmin;
  height: 3vmin;
  background-color: #7c2020;
  transform-origin: left top;
  transform: rotateY(-90deg) translateX(-35vmin);
}
body .scene #ground .container .right {
  width: 70vmin;
  height: 3vmin;
  background-color: #7c2020;
  transform-origin: left top;
  transform: rotateY(90deg) translateX(-35vmin) translateZ(70vmin);
}
body .scene #ground .container .top {
  background-color: #912525;
  width: 70vmin;
  height: 70vmin;
  transform-origin: bottom left;
  transform: rotateX(90deg) translateY(35vmin) translateZ(3vmin);
}
body .scene #ground .container .bottom {
  background-color: #912525;
  width: 70vmin;
  height: 70vmin;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateY(35vmin);
}
body .scene #ground .container .front {
  background-color: #5c1717;
  width: 70vmin;
  height: 3vmin;
  transform-origin: bottom left;
  transform: translateZ(35vmin);
}
body .scene #ground .container .back {
  background-color: #5c1717;
  width: 70vmin;
  height: 3vmin;
  transform-origin: center;
  transform: rotateY(180deg) translateZ(35vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene #ground .container .left, body .scene #ground .container .right, body .scene #ground .container .front, body .scene #ground .container .back {
  background-image: linear-gradient(180deg, #0000 0% 20%, #912525 20% 45%, #0000 45% 100%);
}
body .scene #ground .container .bottom {
  background-color: #333;
  filter: drop-shadow(0 0 0.5rem #0008);
}
body .scene #ground .container .top {
  box-shadow: inset 0 0 15vmin #000a;
  background-image: radial-gradient(#0006, #0000 15vmin), linear-gradient(to bottom, brown 30%, #0000 30% 70%, brown 70% 100%), repeating-linear-gradient(to right, #0000 0% 50%, #0001 50% 100%);
  background-size: 100%, 100%, 4em 4em;
  animation: floorMove 0.5s infinite linear;
}
@keyframes floorMove {
  to {
    background-position-x: center, 4em, 4em;
  }
}
body .scene .wheels #wheel-1 {
  width: 10vmin;
  height: 10vmin;
  transform: translateX(27vmin) rotateY(90deg);
  animation: wheel1-rot 5s infinite linear;
}
body .scene .wheels #wheel-1 .container::before {
  content: "";
  position: absolute;
  width: 10vmin;
  height: 10vmin;
  background: #b92f2f;
  transform: translateY(-10vmin) rotateY(90deg) translateZ(-5vmin);
  border-radius: 50%;
}
body .scene .wheels #wheel-1 .container::after {
  content: "";
  position: absolute;
  width: 10vmin;
  height: 10vmin;
  background: #b92f2f;
  transform: translateY(-10vmin) rotateY(90deg) translateZ(-5vmin) translateZ(10vmin);
  border-radius: 50%;
}
body .scene .wheels #wheel-1 span:nth-child(1) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: brown;
  transform: translateY(-4.5898476258vmin) rotateX(10deg) translateZ(5vmin);
}
body .scene .wheels #wheel-1 span:nth-child(2) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: brown;
  transform: translateY(-4.5898476258vmin) rotateX(20deg) translateZ(5vmin);
}
body .scene .wheels #wheel-1 span:nth-child(3) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: brown;
  transform: translateY(-4.5898476258vmin) rotateX(30deg) translateZ(5vmin);
}
body .scene .wheels #wheel-1 span:nth-child(4) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: brown;
  transform: translateY(-4.5898476258vmin) rotateX(40deg) translateZ(5vmin);
}
body .scene .wheels #wheel-1 span:nth-child(5) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: brown;
  transform: translateY(-4.5898476258vmin) rotateX(50deg) translateZ(5vmin);
}
body .scene .wheels #wheel-1 span:nth-child(6) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: brown;
  transform: translateY(-4.5898476258vmin) rotateX(60deg) translateZ(5vmin);
}
body .scene .wheels #wheel-1 span:nth-child(7) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: brown;
  transform: translateY(-4.5898476258vmin) rotateX(70deg) translateZ(5vmin);
}
body .scene .wheels #wheel-1 span:nth-child(8) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: brown;
  transform: translateY(-4.5898476258vmin) rotateX(80deg) translateZ(5vmin);
}
body .scene .wheels #wheel-1 span:nth-child(9) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: brown;
  transform: translateY(-4.5898476258vmin) rotateX(90deg) translateZ(5vmin);
}
body .scene .wheels #wheel-1 span:nth-child(10) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: brown;
  transform: translateY(-4.5898476258vmin) rotateX(100deg) translateZ(5vmin);
}
body .scene .wheels #wheel-1 span:nth-child(11) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: brown;
  transform: translateY(-4.5898476258vmin) rotateX(110deg) translateZ(5vmin);
}
body .scene .wheels #wheel-1 span:nth-child(12) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: brown;
  transform: translateY(-4.5898476258vmin) rotateX(120deg) translateZ(5vmin);
}
body .scene .wheels #wheel-1 span:nth-child(13) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: brown;
  transform: translateY(-4.5898476258vmin) rotateX(130deg) translateZ(5vmin);
}
body .scene .wheels #wheel-1 span:nth-child(14) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: brown;
  transform: translateY(-4.5898476258vmin) rotateX(140deg) translateZ(5vmin);
}
body .scene .wheels #wheel-1 span:nth-child(15) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: brown;
  transform: translateY(-4.5898476258vmin) rotateX(150deg) translateZ(5vmin);
}
body .scene .wheels #wheel-1 span:nth-child(16) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: brown;
  transform: translateY(-4.5898476258vmin) rotateX(160deg) translateZ(5vmin);
}
body .scene .wheels #wheel-1 span:nth-child(17) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: brown;
  transform: translateY(-4.5898476258vmin) rotateX(170deg) translateZ(5vmin);
}
body .scene .wheels #wheel-1 span:nth-child(18) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: brown;
  transform: translateY(-4.5898476258vmin) rotateX(180deg) translateZ(5vmin);
}
body .scene .wheels #wheel-1 span:nth-child(19) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: brown;
  transform: translateY(-4.5898476258vmin) rotateX(190deg) translateZ(5vmin);
}
body .scene .wheels #wheel-1 span:nth-child(20) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: brown;
  transform: translateY(-4.5898476258vmin) rotateX(200deg) translateZ(5vmin);
}
body .scene .wheels #wheel-1 span:nth-child(21) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: brown;
  transform: translateY(-4.5898476258vmin) rotateX(210deg) translateZ(5vmin);
}
body .scene .wheels #wheel-1 span:nth-child(22) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: brown;
  transform: translateY(-4.5898476258vmin) rotateX(220deg) translateZ(5vmin);
}
body .scene .wheels #wheel-1 span:nth-child(23) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: brown;
  transform: translateY(-4.5898476258vmin) rotateX(230deg) translateZ(5vmin);
}
body .scene .wheels #wheel-1 span:nth-child(24) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: brown;
  transform: translateY(-4.5898476258vmin) rotateX(240deg) translateZ(5vmin);
}
body .scene .wheels #wheel-1 span:nth-child(25) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: brown;
  transform: translateY(-4.5898476258vmin) rotateX(250deg) translateZ(5vmin);
}
body .scene .wheels #wheel-1 span:nth-child(26) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: brown;
  transform: translateY(-4.5898476258vmin) rotateX(260deg) translateZ(5vmin);
}
body .scene .wheels #wheel-1 span:nth-child(27) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: brown;
  transform: translateY(-4.5898476258vmin) rotateX(270deg) translateZ(5vmin);
}
body .scene .wheels #wheel-1 span:nth-child(28) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: brown;
  transform: translateY(-4.5898476258vmin) rotateX(280deg) translateZ(5vmin);
}
body .scene .wheels #wheel-1 span:nth-child(29) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: brown;
  transform: translateY(-4.5898476258vmin) rotateX(290deg) translateZ(5vmin);
}
body .scene .wheels #wheel-1 span:nth-child(30) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: brown;
  transform: translateY(-4.5898476258vmin) rotateX(300deg) translateZ(5vmin);
}
body .scene .wheels #wheel-1 span:nth-child(31) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: brown;
  transform: translateY(-4.5898476258vmin) rotateX(310deg) translateZ(5vmin);
}
body .scene .wheels #wheel-1 span:nth-child(32) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: brown;
  transform: translateY(-4.5898476258vmin) rotateX(320deg) translateZ(5vmin);
}
body .scene .wheels #wheel-1 span:nth-child(33) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: brown;
  transform: translateY(-4.5898476258vmin) rotateX(330deg) translateZ(5vmin);
}
body .scene .wheels #wheel-1 span:nth-child(34) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: brown;
  transform: translateY(-4.5898476258vmin) rotateX(340deg) translateZ(5vmin);
}
body .scene .wheels #wheel-1 span:nth-child(35) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: brown;
  transform: translateY(-4.5898476258vmin) rotateX(350deg) translateZ(5vmin);
}
body .scene .wheels #wheel-1 span:nth-child(36) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: brown;
  transform: translateY(-4.5898476258vmin) rotateX(360deg) translateZ(5vmin);
}
body .scene .wheels #wheel-1 .container span:nth-child(even) {
  background-color: #7c2020;
}
body .scene .wheels #wheel-1 .container span:nth-child(odd) {
  background-color: #cc3636;
}
body .scene .wheels #wheel-1 .container::after, body .scene .wheels #wheel-1 .container::before {
  box-shadow: inset 0 0 5vmin #681a1a;
}
@keyframes wheel1-rot {
  to {
    transform: translateX(27vmin) rotateY(90deg) rotateX(360deg);
  }
}
body .scene .wheels #wheel-2 {
  width: 10vmin;
  height: 10vmin;
  transform: translateX(27vmin) translateY(-10vmin) rotateY(90deg);
  animation: wheel2-rot 5s infinite linear reverse;
}
body .scene .wheels #wheel-2 .container::before {
  content: "";
  position: absolute;
  width: 10vmin;
  height: 10vmin;
  background: #637d37;
  transform: translateY(-10vmin) rotateY(90deg) translateZ(-5vmin);
  border-radius: 50%;
}
body .scene .wheels #wheel-2 .container::after {
  content: "";
  position: absolute;
  width: 10vmin;
  height: 10vmin;
  background: #637d37;
  transform: translateY(-10vmin) rotateY(90deg) translateZ(-5vmin) translateZ(10vmin);
  border-radius: 50%;
}
body .scene .wheels #wheel-2 span:nth-child(1) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: darkolivegreen;
  transform: translateY(-4.5898476258vmin) rotateX(10deg) translateZ(5vmin);
}
body .scene .wheels #wheel-2 span:nth-child(2) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: darkolivegreen;
  transform: translateY(-4.5898476258vmin) rotateX(20deg) translateZ(5vmin);
}
body .scene .wheels #wheel-2 span:nth-child(3) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: darkolivegreen;
  transform: translateY(-4.5898476258vmin) rotateX(30deg) translateZ(5vmin);
}
body .scene .wheels #wheel-2 span:nth-child(4) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: darkolivegreen;
  transform: translateY(-4.5898476258vmin) rotateX(40deg) translateZ(5vmin);
}
body .scene .wheels #wheel-2 span:nth-child(5) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: darkolivegreen;
  transform: translateY(-4.5898476258vmin) rotateX(50deg) translateZ(5vmin);
}
body .scene .wheels #wheel-2 span:nth-child(6) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: darkolivegreen;
  transform: translateY(-4.5898476258vmin) rotateX(60deg) translateZ(5vmin);
}
body .scene .wheels #wheel-2 span:nth-child(7) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: darkolivegreen;
  transform: translateY(-4.5898476258vmin) rotateX(70deg) translateZ(5vmin);
}
body .scene .wheels #wheel-2 span:nth-child(8) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: darkolivegreen;
  transform: translateY(-4.5898476258vmin) rotateX(80deg) translateZ(5vmin);
}
body .scene .wheels #wheel-2 span:nth-child(9) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: darkolivegreen;
  transform: translateY(-4.5898476258vmin) rotateX(90deg) translateZ(5vmin);
}
body .scene .wheels #wheel-2 span:nth-child(10) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: darkolivegreen;
  transform: translateY(-4.5898476258vmin) rotateX(100deg) translateZ(5vmin);
}
body .scene .wheels #wheel-2 span:nth-child(11) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: darkolivegreen;
  transform: translateY(-4.5898476258vmin) rotateX(110deg) translateZ(5vmin);
}
body .scene .wheels #wheel-2 span:nth-child(12) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: darkolivegreen;
  transform: translateY(-4.5898476258vmin) rotateX(120deg) translateZ(5vmin);
}
body .scene .wheels #wheel-2 span:nth-child(13) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: darkolivegreen;
  transform: translateY(-4.5898476258vmin) rotateX(130deg) translateZ(5vmin);
}
body .scene .wheels #wheel-2 span:nth-child(14) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: darkolivegreen;
  transform: translateY(-4.5898476258vmin) rotateX(140deg) translateZ(5vmin);
}
body .scene .wheels #wheel-2 span:nth-child(15) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: darkolivegreen;
  transform: translateY(-4.5898476258vmin) rotateX(150deg) translateZ(5vmin);
}
body .scene .wheels #wheel-2 span:nth-child(16) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: darkolivegreen;
  transform: translateY(-4.5898476258vmin) rotateX(160deg) translateZ(5vmin);
}
body .scene .wheels #wheel-2 span:nth-child(17) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: darkolivegreen;
  transform: translateY(-4.5898476258vmin) rotateX(170deg) translateZ(5vmin);
}
body .scene .wheels #wheel-2 span:nth-child(18) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: darkolivegreen;
  transform: translateY(-4.5898476258vmin) rotateX(180deg) translateZ(5vmin);
}
body .scene .wheels #wheel-2 span:nth-child(19) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: darkolivegreen;
  transform: translateY(-4.5898476258vmin) rotateX(190deg) translateZ(5vmin);
}
body .scene .wheels #wheel-2 span:nth-child(20) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: darkolivegreen;
  transform: translateY(-4.5898476258vmin) rotateX(200deg) translateZ(5vmin);
}
body .scene .wheels #wheel-2 span:nth-child(21) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: darkolivegreen;
  transform: translateY(-4.5898476258vmin) rotateX(210deg) translateZ(5vmin);
}
body .scene .wheels #wheel-2 span:nth-child(22) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: darkolivegreen;
  transform: translateY(-4.5898476258vmin) rotateX(220deg) translateZ(5vmin);
}
body .scene .wheels #wheel-2 span:nth-child(23) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: darkolivegreen;
  transform: translateY(-4.5898476258vmin) rotateX(230deg) translateZ(5vmin);
}
body .scene .wheels #wheel-2 span:nth-child(24) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: darkolivegreen;
  transform: translateY(-4.5898476258vmin) rotateX(240deg) translateZ(5vmin);
}
body .scene .wheels #wheel-2 span:nth-child(25) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: darkolivegreen;
  transform: translateY(-4.5898476258vmin) rotateX(250deg) translateZ(5vmin);
}
body .scene .wheels #wheel-2 span:nth-child(26) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: darkolivegreen;
  transform: translateY(-4.5898476258vmin) rotateX(260deg) translateZ(5vmin);
}
body .scene .wheels #wheel-2 span:nth-child(27) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: darkolivegreen;
  transform: translateY(-4.5898476258vmin) rotateX(270deg) translateZ(5vmin);
}
body .scene .wheels #wheel-2 span:nth-child(28) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: darkolivegreen;
  transform: translateY(-4.5898476258vmin) rotateX(280deg) translateZ(5vmin);
}
body .scene .wheels #wheel-2 span:nth-child(29) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: darkolivegreen;
  transform: translateY(-4.5898476258vmin) rotateX(290deg) translateZ(5vmin);
}
body .scene .wheels #wheel-2 span:nth-child(30) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: darkolivegreen;
  transform: translateY(-4.5898476258vmin) rotateX(300deg) translateZ(5vmin);
}
body .scene .wheels #wheel-2 span:nth-child(31) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: darkolivegreen;
  transform: translateY(-4.5898476258vmin) rotateX(310deg) translateZ(5vmin);
}
body .scene .wheels #wheel-2 span:nth-child(32) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: darkolivegreen;
  transform: translateY(-4.5898476258vmin) rotateX(320deg) translateZ(5vmin);
}
body .scene .wheels #wheel-2 span:nth-child(33) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: darkolivegreen;
  transform: translateY(-4.5898476258vmin) rotateX(330deg) translateZ(5vmin);
}
body .scene .wheels #wheel-2 span:nth-child(34) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: darkolivegreen;
  transform: translateY(-4.5898476258vmin) rotateX(340deg) translateZ(5vmin);
}
body .scene .wheels #wheel-2 span:nth-child(35) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: darkolivegreen;
  transform: translateY(-4.5898476258vmin) rotateX(350deg) translateZ(5vmin);
}
body .scene .wheels #wheel-2 span:nth-child(36) {
  width: 10vmin;
  height: 0.872664626vmin;
  background: darkolivegreen;
  transform: translateY(-4.5898476258vmin) rotateX(360deg) translateZ(5vmin);
}
body .scene .wheels #wheel-2 .container span:nth-child(even) {
  background-color: #39481f;
}
body .scene .wheels #wheel-2 .container span:nth-child(odd) {
  background-color: #718e3f;
}
body .scene .wheels #wheel-2 .container::after, body .scene .wheels #wheel-2 .container::before {
  box-shadow: inset 0 0 5vmin #2b3618;
}
@keyframes wheel2-rot {
  to {
    transform: translateX(27vmin) translateY(-10vmin) rotateY(90deg) rotateX(360deg);
  }
}
body .scene .pillars #pillar-1 {
  width: 25vmin;
  height: 6vmin;
  transform: translateX(-2.5vmin) translateY(-10vmin) translateZ(25vmin) rotateZ(90deg);
}
body .scene .pillars #pillar-1 .container::before {
  content: "";
  position: absolute;
  width: 6vmin;
  height: 6vmin;
  background: #b45c33;
  transform: translateY(-6vmin) rotateY(90deg) translateZ(-3vmin);
  border-radius: 50%;
}
body .scene .pillars #pillar-1 .container::after {
  content: "";
  position: absolute;
  width: 6vmin;
  height: 6vmin;
  background: #b45c33;
  transform: translateY(-6vmin) rotateY(90deg) translateZ(-3vmin) translateZ(25vmin);
  border-radius: 50%;
}
body .scene .pillars #pillar-1 span:nth-child(1) {
  width: 25vmin;
  height: 0.5235987756vmin;
  background: sienna;
  transform: translateY(-2.7539085755vmin) rotateX(10deg) translateZ(3vmin);
}
body .scene .pillars #pillar-1 span:nth-child(2) {
  width: 25vmin;
  height: 0.5235987756vmin;
  background: sienna;
  transform: translateY(-2.7539085755vmin) rotateX(20deg) translateZ(3vmin);
}
body .scene .pillars #pillar-1 span:nth-child(3) {
  width: 25vmin;
  height: 0.5235987756vmin;
  background: sienna;
  transform: translateY(-2.7539085755vmin) rotateX(30deg) translateZ(3vmin);
}
body .scene .pillars #pillar-1 span:nth-child(4) {
  width: 25vmin;
  height: 0.5235987756vmin;
  background: sienna;
  transform: translateY(-2.7539085755vmin) rotateX(40deg) translateZ(3vmin);
}
body .scene .pillars #pillar-1 span:nth-child(5) {
  width: 25vmin;
  height: 0.5235987756vmin;
  background: sienna;
  transform: translateY(-2.7539085755vmin) rotateX(50deg) translateZ(3vmin);
}
body .scene .pillars #pillar-1 span:nth-child(6) {
  width: 25vmin;
  height: 0.5235987756vmin;
  background: sienna;
  transform: translateY(-2.7539085755vmin) rotateX(60deg) translateZ(3vmin);
}
body .scene .pillars #pillar-1 span:nth-child(7) {
  width: 25vmin;
  height: 0.5235987756vmin;
  background: sienna;
  transform: translateY(-2.7539085755vmin) rotateX(70deg) translateZ(3vmin);
}
body .scene .pillars #pillar-1 span:nth-child(8) {
  width: 25vmin;
  height: 0.5235987756vmin;
  background: sienna;
  transform: translateY(-2.7539085755vmin) rotateX(80deg) translateZ(3vmin);
}
body .scene .pillars #pillar-1 span:nth-child(9) {
  width: 25vmin;
  height: 0.5235987756vmin;
  background: sienna;
  transform: translateY(-2.7539085755vmin) rotateX(90deg) translateZ(3vmin);
}
body .scene .pillars #pillar-1 span:nth-child(10) {
  width: 25vmin;
  height: 0.5235987756vmin;
  background: sienna;
  transform: translateY(-2.7539085755vmin) rotateX(100deg) translateZ(3vmin);
}
body .scene .pillars #pillar-1 span:nth-child(11) {
  width: 25vmin;
  height: 0.5235987756vmin;
  background: sienna;
  transform: translateY(-2.7539085755vmin) rotateX(110deg) translateZ(3vmin);
}
body .scene .pillars #pillar-1 span:nth-child(12) {
  width: 25vmin;
  height: 0.5235987756vmin;
  background: sienna;
  transform: translateY(-2.7539085755vmin) rotateX(120deg) translateZ(3vmin);
}
body .scene .pillars #pillar-1 span:nth-child(13) {
  width: 25vmin;
  height: 0.5235987756vmin;
  background: sienna;
  transform: translateY(-2.7539085755vmin) rotateX(130deg) translateZ(3vmin);
}
body .scene .pillars #pillar-1 span:nth-child(14) {
  width: 25vmin;
  height: 0.5235987756vmin;
  background: sienna;
  transform: translateY(-2.7539085755vmin) rotateX(140deg) translateZ(3vmin);
}
body .scene .pillars #pillar-1 span:nth-child(15) {
  width: 25vmin;
  height: 0.5235987756vmin;
  background: sienna;
  transform: translateY(-2.7539085755vmin) rotateX(150deg) translateZ(3vmin);
}
body .scene .pillars #pillar-1 span:nth-child(16) {
  width: 25vmin;
  height: 0.5235987756vmin;
  background: sienna;
  transform: translateY(-2.7539085755vmin) rotateX(160deg) translateZ(3vmin);
}
body .scene .pillars #pillar-1 span:nth-child(17) {
  width: 25vmin;
  height: 0.5235987756vmin;
  background: sienna;
  transform: translateY(-2.7539085755vmin) rotateX(170deg) translateZ(3vmin);
}
body .scene .pillars #pillar-1 span:nth-child(18) {
  width: 25vmin;
  height: 0.5235987756vmin;
  background: sienna;
  transform: translateY(-2.7539085755vmin) rotateX(180deg) translateZ(3vmin);
}
body .scene .pillars #pillar-1 span:nth-child(19) {
  width: 25vmin;
  height: 0.5235987756vmin;
  background: sienna;
  transform: translateY(-2.7539085755vmin) rotateX(190deg) translateZ(3vmin);
}
body .scene .pillars #pillar-1 span:nth-child(20) {
  width: 25vmin;
  height: 0.5235987756vmin;
  background: sienna;
  transform: translateY(-2.7539085755vmin) rotateX(200deg) translateZ(3vmin);
}
body .scene .pillars #pillar-1 span:nth-child(21) {
  width: 25vmin;
  height: 0.5235987756vmin;
  background: sienna;
  transform: translateY(-2.7539085755vmin) rotateX(210deg) translateZ(3vmin);
}
body .scene .pillars #pillar-1 span:nth-child(22) {
  width: 25vmin;
  height: 0.5235987756vmin;
  background: sienna;
  transform: translateY(-2.7539085755vmin) rotateX(220deg) translateZ(3vmin);
}
body .scene .pillars #pillar-1 span:nth-child(23) {
  width: 25vmin;
  height: 0.5235987756vmin;
  background: sienna;
  transform: translateY(-2.7539085755vmin) rotateX(230deg) translateZ(3vmin);
}
body .scene .pillars #pillar-1 span:nth-child(24) {
  width: 25vmin;
  height: 0.5235987756vmin;
  background: sienna;
  transform: translateY(-2.7539085755vmin) rotateX(240deg) translateZ(3vmin);
}
body .scene .pillars #pillar-1 span:nth-child(25) {
  width: 25vmin;
  height: 0.5235987756vmin;
  background: sienna;
  transform: translateY(-2.7539085755vmin) rotateX(250deg) translateZ(3vmin);
}
body .scene .pillars #pillar-1 span:nth-child(26) {
  width: 25vmin;
  height: 0.5235987756vmin;
  background: sienna;
  transform: translateY(-2.7539085755vmin) rotateX(260deg) translateZ(3vmin);
}
body .scene .pillars #pillar-1 span:nth-child(27) {
  width: 25vmin;
  height: 0.5235987756vmin;
  background: sienna;
  transform: translateY(-2.7539085755vmin) rotateX(270deg) translateZ(3vmin);
}
body .scene .pillars #pillar-1 span:nth-child(28) {
  width: 25vmin;
  height: 0.5235987756vmin;
  background: sienna;
  transform: translateY(-2.7539085755vmin) rotateX(280deg) translateZ(3vmin);
}
body .scene .pillars #pillar-1 span:nth-child(29) {
  width: 25vmin;
  height: 0.5235987756vmin;
  background: sienna;
  transform: translateY(-2.7539085755vmin) rotateX(290deg) translateZ(3vmin);
}
body .scene .pillars #pillar-1 span:nth-child(30) {
  width: 25vmin;
  height: 0.5235987756vmin;
  background: sienna;
  transform: translateY(-2.7539085755vmin) rotateX(300deg) translateZ(3vmin);
}
body .scene .pillars #pillar-1 span:nth-child(31) {
  width: 25vmin;
  height: 0.5235987756vmin;
  background: sienna;
  transform: translateY(-2.7539085755vmin) rotateX(310deg) translateZ(3vmin);
}
body .scene .pillars #pillar-1 span:nth-child(32) {
  width: 25vmin;
  height: 0.5235987756vmin;
  background: sienna;
  transform: translateY(-2.7539085755vmin) rotateX(320deg) translateZ(3vmin);
}
body .scene .pillars #pillar-1 span:nth-child(33) {
  width: 25vmin;
  height: 0.5235987756vmin;
  background: sienna;
  transform: translateY(-2.7539085755vmin) rotateX(330deg) translateZ(3vmin);
}
body .scene .pillars #pillar-1 span:nth-child(34) {
  width: 25vmin;
  height: 0.5235987756vmin;
  background: sienna;
  transform: translateY(-2.7539085755vmin) rotateX(340deg) translateZ(3vmin);
}
body .scene .pillars #pillar-1 span:nth-child(35) {
  width: 25vmin;
  height: 0.5235987756vmin;
  background: sienna;
  transform: translateY(-2.7539085755vmin) rotateX(350deg) translateZ(3vmin);
}
body .scene .pillars #pillar-1 span:nth-child(36) {
  width: 25vmin;
  height: 0.5235987756vmin;
  background: sienna;
  transform: translateY(-2.7539085755vmin) rotateX(360deg) translateZ(3vmin);
}
body .scene .pillars #pillar-1 .container span:nth-child(even) {
  background-color: #8c4827;
}
body .scene .pillars #pillar-1 .container span:nth-child(odd) {
  background-color: #b45c33;
}
body .scene .pillars #pillar-1 .container::after, body .scene .pillars #pillar-1 .container::before {
  box-shadow: inset 0 0 5vmin #64331c;
}
body .scene .pillars #pillar-1 .container::after {
  box-shadow: 0 0 3vmin #0008;
}
body .scene .pillars #pillar-2 {
  width: 25vmin;
  height: 6vmin;
  transform: translateX(47.5vmin) translateY(-10vmin) translateZ(25vmin) rotateZ(90deg);
}
body .scene .pillars #pillar-2 .container::before {
  content: "";
  position: absolute;
  width: 6vmin;
  height: 6vmin;
  background: #b45c33;
  transform: translateY(-6vmin) rotateY(90deg) translateZ(-3vmin);
  border-radius: 50%;
}
body .scene .pillars #pillar-2 .container::after {
  content: "";
  position: absolute;
  width: 6vmin;
  height: 6vmin;
  background: #b45c33;
  transform: translateY(-6vmin) rotateY(90deg) translateZ(-3vmin) translateZ(25vmin);
  border-radius: 50%;
}
body .scene .pillars #pillar-2 span:nth-child(1) {
  width: 25vmin;
  height: 0.5235987756vmin;
  background: sienna;
  transform: translateY(-2.7539085755vmin) rotateX(10deg) translateZ(3vmin);
}
body .scene .pillars #pillar-2 span:nth-child(2) {
  width: 25vmin;
  height: 0.5235987756vmin;
  background: sienna;
  transform: translateY(-2.7539085755vmin) rotateX(20deg) translateZ(3vmin);
}
body .scene .pillars #pillar-2 span:nth-child(3) {
  width: 25vmin;
  height: 0.5235987756vmin;
  background: sienna;
  transform: translateY(-2.7539085755vmin) rotateX(30deg) translateZ(3vmin);
}
body .scene .pillars #pillar-2 span:nth-child(4) {
  width: 25vmin;
  height: 0.5235987756vmin;
  background: sienna;
  transform: translateY(-2.7539085755vmin) rotateX(40deg) translateZ(3vmin);
}
body .scene .pillars #pillar-2 span:nth-child(5) {
  width: 25vmin;
  height: 0.5235987756vmin;
  background: sienna;
  transform: translateY(-2.7539085755vmin) rotateX(50deg) translateZ(3vmin);
}
body .scene .pillars #pillar-2 span:nth-child(6) {
  width: 25vmin;
  height: 0.5235987756vmin;
  background: sienna;
  transform: translateY(-2.7539085755vmin) rotateX(60deg) translateZ(3vmin);
}
body .scene .pillars #pillar-2 span:nth-child(7) {
  width: 25vmin;
  height: 0.5235987756vmin;
  background: sienna;
  transform: translateY(-2.7539085755vmin) rotateX(70deg) translateZ(3vmin);
}
body .scene .pillars #pillar-2 span:nth-child(8) {
  width: 25vmin;
  height: 0.5235987756vmin;
  background: sienna;
  transform: translateY(-2.7539085755vmin) rotateX(80deg) translateZ(3vmin);
}
body .scene .pillars #pillar-2 span:nth-child(9) {
  width: 25vmin;
  height: 0.5235987756vmin;
  background: sienna;
  transform: translateY(-2.7539085755vmin) rotateX(90deg) translateZ(3vmin);
}
body .scene .pillars #pillar-2 span:nth-child(10) {
  width: 25vmin;
  height: 0.5235987756vmin;
  background: sienna;
  transform: translateY(-2.7539085755vmin) rotateX(100deg) translateZ(3vmin);
}
body .scene .pillars #pillar-2 span:nth-child(11) {
  wid.........完整代码请登录后点击上方下载按钮下载查看