给我html温暖的3D背景，共五种，看起来美观，温暖，科技感，不含图片，纯代码

以下是五种纯代码的html温暖的3D背景：

1. 棱锥背景：

<div class="pyramid"></div>

.pyramid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(60deg, #ff6d6d, #ffa24c);
  transform-style: preserve-3d;
  transform: rotateX(60deg) translateZ(-50px);
  animation: rotate 10s linear infinite;
}

@keyframes rotate {
  to {
    transform: rotateX(60deg) rotateY(360deg) translateZ(-50px);
  }
}

2. 玻璃背景：

<div class="glass"></div>

.glass {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #F8F8F8, #FFF);
  transform-style: preserve-3d;
  transform: rotateX(60deg) rotateY(30deg) translateZ(-100px);
  animation: rotate 10s linear infinite;
  perspective: 1000px;
}

@keyframes rotate {
  to {
    transform: rotateX(60deg) rotateY(390deg) translateZ(-100px);
  }
}

3. 球体背景：

<div class="sphere"></div>

.sphere {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(60deg, #ff6d6d, #ffa24c);
  transform-style: preserve-3d;
  transform: translateZ(-200px);
  animation: rotate 10s linear infinite;
  perspective: 1000px;
  border-radius: 50%;
}

@keyframes rotate {
  to {
    transform: rotateX(60deg) rotateY(360deg) translateZ(-200px);
  }
}

4. 螺旋背景：

<div class="spiral"></div>

.spiral {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(60deg, #ff6d6d, #ffa24c);
  transform-style: preserve-3d;
  transform: translateZ(-200px);
  animation: rotate 10s linear infinite;
  perspective: 1000px;
  border-radius: 50%;
}

.spiral:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
}

@keyframes rotate {
  to {
    transform: rotateX(60deg) rotateY(360deg) translateZ(-200px);
  }
  from {
    transform: rotateX(60deg) rotateY(0deg) translateZ(-200px);
  }
}

5. 立方体背景：

<div class="cube">
  <div class="face front"></div>
  <div class="face back"></div>
  <div class="face right"></div>
  <div class="face left"></div>
  <div class="face top"></div>
  <div class="face bottom"></div>
</div>

.cube {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin-top: -100px;
  margin-left: -100px;
  transform-style: preserve-3d;
  animation: rotate 10s linear infinite;
  perspective: 1000px;
}

.face {
  position: absolute;
  width: 200px;
  height: 200px;
  background: linear-gradient(60deg, #ff6d6d, #ffa24c);
  opacity: 0.8;
}

.front {
  transform: translateZ(100px);
}

.back {
  transform: translateZ(-100px) rotateY(180deg);
}

.right {
  transform: rotateY(90deg) translateX(100px);
}

.left {
  transform: rotateY(-90deg) translateX(-100px);
}

.top {
  transform: rotateX(90deg) translateY(-100px);
}

.bottom {
  transform: rotateX(-90deg) translateY(100px);
}

@keyframes rotate {
  to {
    transform: rotateX(360deg) rotateY(360deg);
  }
}