📝 代码查看
使用runcode.html页面

1
查看次数
2025-11-23
创建时间
2025-11-23
最后更新
  <div class='polyhedron polyhedron--rhombicosidodecahedron'>
  <div class='polyhedron__comp polyhedron--dodecahedron'>
    <div class='polyhedron__face polyhedron--dodecahedron__face'>
      <div class='transformer scaler-shifter'>
        <div class='polygon polygon--pentagon'>
          <div class='polygon--pentagon__inner'></div>
        </div>
      </div>
    </div>
    <div class='polyhedron__face polyhedron--dodecahedron__face'>
      <div class='transformer scaler-shifter'>
        <div class='polygon polygon--pentagon'>
          <div class='polygon--pentagon__inner'></div>
        </div>
      </div>
    </div>
    <div class='polyhedron__face polyhedron--dodecahedron__face'>
      <div class='transformer scaler-shifter'>
        <div class='polygon polygon--pentagon'>
          <div class='polygon--pentagon__inner'></div>
        </div>
      </div>
    </div>
    <div class='polyhedron__face polyhedron--dodecahedron__face'>
      <div class='transformer scaler-shifter'>
        <div class='polygon polygon--pentagon'>
          <div class='polygon--pentagon__inner'></div>
        </div>
      </div>
    </div>
    <div class='polyhedron__face polyhedron--dodecahedron__face'>
      <div class='transformer scaler-shifter'>
        <div class='polygon polygon--pentagon'>
          <div class='polygon--pentagon__inner'></div>
        </div>
      </div>
    </div>
    <div class='polyhedron__face polyhedron--dodecahedron__face'>
      <div class='transformer scaler-shifter'>
        <div class='polygon polygon--pentagon'>
          <div class='polygon--pentagon__inner'></div>
        </div>
      </div>
    </div>
    <div class='polyhedron__face polyhedron--dodecahedron__face'>
      <div class='transformer scaler-shifter'>
        <div class='polygon polygon--pentagon'>
          <div class='polygon--pentagon__inner'></div>
        </div>
      </div>
    </div>
    <div class='polyhedron__face polyhedron--dodecahedron__face'>
      <div class='transformer scaler-shifter'>
        <div class='polygon polygon--pentagon'>
          <div class='polygon--pentagon__inner'></div>
        </div>
      </div>
    </div>
    <div class='polyhedron__face polyhedron--dodecahedron__face'>
      <div class='transformer scaler-shifter'>
        <div class='polygon polygon--pentagon'>
          <div class='polygon--pentagon__inner'></div>
        </div>
      </div>
    </div>
    <div class='polyhedron__face polyhedron--dodecahedron__face'>
      <div class='transformer scaler-shifter'>
        <div class='polygon polygon--pentagon'>
          <div class='polygon--pentagon__inner'></div>
        </div>
      </div>
    </div>
    <div class='polyhedron__face polyhedron--dodecahedron__face'>
      <div class='transformer scaler-shifter'>
        <div class='polygon polygon--pentagon'>
          <div class='polygon--pentagon__inner'></div>
        </div>
      </div>
    </div>
    <div class='polyhedron__face polyhedron--dodecahedron__face'>
      <div class='transformer scaler-shifter'>
        <div class='polygon polygon--pentagon'>
          <div class='polygon--pentagon__inner'></div>
        </div>
      </div>
    </div>
  </div>
  <div class='polyhedron__comp polyhedron--icosahedron'>
    <div class='polyhedron__face polyhedron--icosahedron__face'>
      <div class='transformer scaler-shifter'>
        <div class='polygon polygon--triangle'></div>
      </div>
    </div>
    <div class='polyhedron__face polyhedron--icosahedron__face'>
      <div class='transformer scaler-shifter'>
        <div class='polygon polygon--triangle'></div>
      </div>
    </div>
    <div class='polyhedron__face polyhedron--icosahedron__face'>
      <div class='transformer scaler-shifter'>
        <div class='polygon polygon--triangle'></div>
      </div>
    </div>
    <div class='polyhedron__face polyhedron--icosahedron__face'>
      <div class='transformer scaler-shifter'>
        <div class='polygon polygon--triangle'></div>
      </div>
    </div>
    <div class='polyhedron__face polyhedron--icosahedron__face'>
      <div class='transformer scaler-shifter'>
        <div class='polygon polygon--triangle'></div>
      </div>
    </div>
    <div class='polyhedron__face polyhedron--icosahedron__face'>
      <div class='transformer scaler-shifter'>
        <div class='polygon polygon--triangle'></div>
      </div>
    </div>
    <div class='polyhedron__face polyhedron--icosahedron__face'>
      <div class='transformer scaler-shifter'>
        <div class='polygon polygon--triangle'></div>
      </div>
    </div>
    <div class='polyhedron__face polyhedron--icosahedron__face'>
      <div class='transformer scaler-shifter'>
        <div class='polygon polygon--triangle'></div>
      </div>
    </div>
    <div class='polyhedron__face polyhedron--icosahedron__face'>
      <div class='transformer scaler-shifter'>
        <div class='polygon polygon--triangle'></div>
      </div>
    </div>
    <div class='polyhedron__face polyhedron--icosahedron__face'>
      <div class='transformer scaler-shifter'>
        <div class='polygon polygon--triangle'></div>
      </div>
    </div>
    <div class='polyhedron__face polyhedron--icosahedron__face'>
      <div class='transformer scaler-shifter'>
        <div class='polygon polygon--triangle'></div>
      </div>
    </div>
    <div class='polyhedron__face polyhedron--icosahedron__face'>
      <div class='transformer scaler-shifter'>
        <div class='polygon polygon--triangle'></div>
      </div>
    </div>
    <div class='polyhedron__face polyhedron--icosahedron__face'>
      <div class='transformer scaler-shifter'>
        <div class='polygon polygon--triangle'></div>
      </div>
    </div>
    <div class='polyhedron__face polyhedron--icosahedron__face'>
      <div class='transformer scaler-shifter'>
        <div class='polygon polygon--triangle'></div>
      </div>
    </div>
    <div class='polyhedron__face polyhedron--icosahedron__face'>
      <div class='transformer scaler-shifter'>
        <div class='polygon polygon--triangle'></div>
      </div>
    </div>
    <div class='polyhedron__face polyhedron--icosahedron__face'>
      <div class='transformer scaler-shifter'>
        <div class='polygon polygon--triangle'></div>
      </div>
    </div>
    <div class='polyhedron__face polyhedron--icosahedron__face'>
      <div class='transformer scaler-shifter'>
        <div class='polygon polygon--triangle'></div>
      </div>
    </div>
    <div class='polyhedron__face polyhedron--icosahedron__face'>
      <div class='transformer scaler-shifter'>
        <div class='polygon polygon--triangle'></div>
      </div>
    </div>
    <div class='polyhedron__face polyhedron--icosahedron__face'>
      <div class='transformer scaler-shifter'>
        <div class='polygon polygon--triangle'></div>
      </div>
    </div>
    <div class='polyhedron__face polyhedron--icosahedron__face'>
      <div class='transformer scaler-shifter'>
        <div class='polygon polygon--triangle'></div>
      </div>
    </div>
  </div>
  <div class='polyhedron__comp stretchers'>
    <div class='polyhedron__face stretcher__face'>
      <div class='transformer stretcher'>
        <div class='polygon polygon--rect'></div>
      </div>
    </div>
    <div class='polyhedron__face stretcher__face'>
      <div class='transformer stretcher'>
        <div class='polygon polygon--rect'></div>
      </div>
    </div>
    <div class='polyhedron__face stretcher__face'>
      <div class='transformer stretcher'>
        <div class='polygon polygon--rect'></div>
      </div>
    </div>
    <div class='polyhedron__face stretcher__face'>
      <div class='transformer stretcher'>
        <div class='polygon polygon--rect'></div>
      </div>
    </div>
    <div class='polyhedron__face stretcher__face'>
      <div class='transformer stretcher'>
        <div class='polygon polygon--rect'></div>
      </div>
    </div>
    <div class='polyhedron__face stretcher__face'>
      <div class='transformer stretcher'>
        <div class='polygon polygon--rect'></div>
      </div>
    </div>
    <div class='polyhedron__face stretcher__face'>
      <div class='transformer stretcher'>
        <div class='polygon polygon--rect'></div>
      </div>
    </div>
    <div class='polyhedron__face stretcher__face'>
      <div class='transformer stretcher'>
        <div class='polygon polygon--rect'></div>
      </div>
    </div>
    <div class='polyhedron__face stretcher__face'>
      <div class='transformer stretcher'>
        <div class='polygon polygon--rect'></div>
      </div>
    </div>
    <div class='polyhedron__face stretcher__face'>
      <div class='transformer stretcher'>
        <div class='polygon polygon--rect'></div>
      </div>
    </div>
    <div class='polyhedron__face stretcher__face'>
      <div class='transformer stretcher'>
        <div class='polygon polygon--rect'></div>
      </div>
    </div>
    <div class='polyhedron__face stretcher__face'>
      <div class='transformer stretcher'>
        <div class='polygon polygon--rect'></div>
      </div>
    </div>
    <div class='polyhedron__face stretcher__face'>
      <div class='transformer stretcher'>
        <div class='polygon polygon--rect'></div>
      </div>
    </div>
    <div class='polyhedron__face stretcher__face'>
      <div class='transformer stretcher'>
        <div class='polygon polygon--rect'></div>
      </div>
    </div>
    <div class='polyhedron__face stretcher__face'>
      <div class='transformer stretcher'>
        <div class='polygon polygon--rect'></div>
      </div>
    </div>
    <div class='polyhedron__face stretcher__face'>
      <div class='transformer stretcher'>
        <div class='polygon polygon--rect'></div>
      </div>
    </div>
    <div class='polyhedron__face stretcher__face'>
      <div class='transformer stretcher'>
        <div class='polygon polygon--rect'></div>
      </div>
    </div>
    <div class='polyhedron__face stretcher__face'>
      <div class='transformer stretcher'>
        <div class='polygon polygon--rect'></div>
      </div>
    </div>
    <div class='polyhedron__face stretcher__face'>
      <div class='transformer stretcher'>
        <div class='polygon polygon--rect'></div>
      </div>
    </div>
    <div class='polyhedron__face stretcher__face'>
      <div class='transformer stretcher'>
        <div class='polygon polygon--rect'></div>
      </div>
    </div>
    <div class='polyhedron__face stretcher__face'>
      <div class='transformer stretcher'>
        <div class='polygon polygon--rect'></div>
      </div>
    </div>
    <div class='polyhedron__face stretcher__face'>
      <div class='transformer stretcher'>
        <div class='polygon polygon--rect'></div>
      </div>
    </div>
    <div class='polyhedron__face stretcher__face'>
      <div class='transformer stretcher'>
        <div class='polygon polygon--rect'></div>
      </div>
    </div>
    <div class='polyhedron__face stretcher__face'>
      <div class='transformer stretcher'>
        <div class='polygon polygon--rect'></div>
      </div>
    </div>
    <div class='polyhedron__face stretcher__face'>
      <div class='transformer stretcher'>
        <div class='polygon polygon--rect'></div>
      </div>
    </div>
    <div class='polyhedron__face stretcher__face'>
      <div class='transformer stretcher'>
        <div class='polygon polygon--rect'></div>
      </div>
    </div>
    <div class='polyhedron__face stretcher__face'>
      <div class='transformer stretcher'>
        <div class='polygon polygon--rect'></div>
      </div>
    </div>
    <div class='polyhedron__face stretcher__face'>
      <div class='transformer stretcher'>
        <div class='polygon polygon--rect'></div>
      </div>
    </div>
    <div class='polyhedron__face stretcher__face'>
      <div class='transformer stretcher'>
        <div class='polygon polygon--rect'></div>
      </div>
    </div>
    <div class='polyhedron__face stretcher__face'>
      <div class='transformer stretcher'>
        <div class='polygon polygon--rect'></div>
      </div>
    </div>
  </div>
</div>
html, body {
  height: 100%;
}

body {
  overflow: hidden;
  margin: 0;
  perspective: 32em;
  perspective-origin: calc(50% - 1.625em) 50%;
  background: linear-gradient(#000000, #696969);
  color: lemonchiffon;
}

.polyhedron, .polyhedron *,
.polyhedron :before, .polyhedron :after {
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
}

.polyhedron {
  animation: rot 28s linear infinite;
}

@keyframes rot {
  to {
    transform: rotateY(360deg);
  }
}
.polyhedron__face {
  backface-visibility: hidden;
}
.polyhedron--dodecahedron__face:nth-child(1) {
  transform: rotateY(0deg) rotateX(-26.55444deg);
}
.polyhedron--dodecahedron__face:nth-child(1) .polygon :before {
  background-image: linear-gradient(90deg, rgba(255, 51, 51, 0.08), rgba(214, 255, 51, 0.08));
}
.polyhedron--dodecahedron__face:nth-child(2) {
  transform: rotateY(72deg) rotateX(-26.55444deg);
}
.polyhedron--dodecahedron__face:nth-child(2) .polygon :before {
  background-image: linear-gradient(90deg, rgba(214, 255, 51, 0.08), rgba(51, 255, 133, 0.08));
}
.polyhedron--dodecahedron__face:nth-child(3) {
  transform: rotateY(144deg) rotateX(-26.55444deg);
}
.polyhedron--dodecahedron__face:nth-child(3) .polygon :before {
  background-image: linear-gradient(90deg, rgba(51, 255, 133, 0.08), rgba(51, 133, 255, 0.08));
}
.polyhedron--dodecahedron__face:nth-child(4) {
  transform: rotateY(216deg) rotateX(-26.55444deg);
}
.polyhedron--dodecahedron__face:nth-child(4) .polygon :before {
  background-image: linear-gradient(90deg, rgba(51, 133, 255, 0.08), rgba(214, 51, 255, 0.08));
}
.polyhedron--dodecahedron__face:nth-child(5) {
  transform: rotateY(288deg) rotateX(-26.55444deg);
}
.polyhedron--dodecahedron__face:nth-child(5) .polygon :before {
  background-image: linear-gradient(90deg, rgba(214, 51, 255, 0.08), rgba(255, 51, 51, 0.08));
}
.polyhedron--dodecahedron__face:nth-child(6) {
  transform: rotateY(180deg) rotateX(-90deg);
}
.polyhedron--dodecahedron__face:nth-child(6) .polygon :before {
  background-image: linear-gradient(90deg, rgba(255, 51, 51, 0.08), rgba(214, 255, 51, 0.08));
}
.polyhedron--dodecahedron__face:nth-child(7) {
  transform: rotate(180deg) rotateY(396deg) rotateX(-26.55444deg);
}
.polyhedron--dodecahedron__face:nth-child(7) .polygon :before {
  background-image: linear-gradient(90deg, rgba(255, 51, 51, 0.08), rgba(214, 255, 51, 0.08));
}
.polyhedron--dodecahedron__face:nth-child(8) {
  transform: rotate(180deg) rotateY(468deg) rotateX(-26.55444deg);
}
.polyhedron--dodecahedron__face:nth-child(8) .polygon :before {
  background-image: linear-gradient(90deg, rgba(214, 255, 51, 0.08), rgba(51, 255, 133, 0.08));
}
.polyhedron--dodecahedron__face:nth-child(9) {
  transform: rotate(180deg) rotateY(540deg) rotateX(-26.55444deg);
}
.polyhedron--dodecahedron__face:nth-child(9) .polygon :before {
  background-image: linear-gradient(90deg, rgba(51, 255, 133, 0.08), rgba(51, 133, 255, 0.08));
}
.polyhedron--dodecahedron__face:nth-child(10) {
  transform: rotate(180deg) rotateY(612deg) rotateX(-26.55444deg);
}
.polyhedron--dodecahedron__face:nth-child(10) .polygon :before {
  background-image: linear-gradient(90deg, rgba(51, 133, 255, 0.08), rgba(214, 51, 255, 0.08));
}
.polyhedron--dodecahedron__face:nth-child(11) {
  transform: rotate(180deg) rotateY(684deg) rotateX(-26.55444deg);
}
.polyhedron--dodecahedron__face:nth-child(11) .polygon :before {
  background-image: linear-gradient(90deg, rgba(214, 51, 255, 0.08), rgba(255, 51, 51, 0.08));
}
.polyhedron--dodecahedron__face:nth-child(12) {
  transform: rotate(180deg) rotateY(144deg) rotateX(-90deg);
}
.polyhedron--dodecahedron__face:nth-child(12) .polygon :before {
  background-image: linear-gradient(90deg, rgba(255, 51, 51, 0.08), rgba(214, 255, 51, 0.08));
}
.polyhedron--icosahedron__face:nth-child(1) {
  transform: rotateY(-36deg) rotateX(-52.63008deg) rotate(180deg);
}
.polyhedron--icosahedron__face:nth-child(1) .polygon:before {
  background-image: linear-gradient(90deg, rgba(255, 51, 51, 0.08), rgba(214, 255, 51, 0.08));
  background: rgba(233, 127, 2, 0.15);
}
.polyhedron--icosahedron__face:nth-child(2) {
  transform: rotateY(36deg) rotateX(-52.63008deg) rotate(180deg);
}
.polyhedron--icosahedron__face:nth-child(2) .polygon:before {
  background-image: linear-gradient(90deg, rgba(214, 255, 51, 0.08), rgba(51, 255, 133, 0.08));
  background: rgba(233, 127, 2, 0.15);
}
.polyhedron--icosahedron__face:nth-child(3) {
  transform: rotateY(108deg) rotateX(-52.63008deg) rotate(180deg);
}
.polyhedron--icosahedron__face:nth-child(3) .polygon:before {
  background-image: linear-gradient(90deg, rgba(51, 255, 133, 0.08), rgba(51, 133, 255, 0.08));
  background: rgba(233, 127, 2, 0.15);
}
.polyhedron--icosahedron__face:nth-child(4) {
  transform: rotateY(180deg) rotateX(-52.63008deg) rotate(180deg);
}
.polyhedron--icosahedron__face:nth-child(4) .polygon:before {
  background-image: linear-gradient(90deg, rgba(51, 133, 255, 0.08), rgba(214, 51, 255, 0.08));
  background: rgba(233, 127, 2, 0.15);
}
.polyhedron--icosahedron__face:nth-child(5) {
  transform: rotateY(252deg) rotateX(-52.63008deg) rotate(180deg);
}
.polyhedron--icosahedron__face:nth-child(5) .polygon:before {
  background-image: linear-gradient(90deg, rgba(214, 51, 255, 0.08), rgba(255, 51, 51, 0.08));
  background: rgba(233, 127, 2, 0.15);
}
.polyhedron--icosahedron__face:nth-child(6) {
  transform: rotate(180deg) rotateY(360deg) rotateX(-10.8113deg);
}
.polyhedron--icosahedron__face:nth-child(6) .polygon:before {
  background-image: linear-gradient(90deg, rgba(255, 51, 51, 0.08), rgba(214, 255, 51, 0.08));
  background: rgba(233, 127, 2, 0.15);
}
.polyhedron--icosahedron__face:nth-child(7) {
  transform: rotate(180deg) rotateY(432deg) rotateX(-10.8113deg);
}
.polyhedron--icosahedron__face:nth-child(7) .polygon:before {
  background-image: linear-gradient(90deg, rgba(214, 255, 51, 0.08), rgba(51, 255, 133, 0.08));
  background: rgba(233, 127, 2, 0.15);
}
.polyhedron--icosahedron__face:nth-child(8) {
  transform: rotate(180deg) rotateY(504deg) rotateX(-10.8113deg);
}
.polyhedron--icosahedron__face:nth-child(8) .polygon:before {
  background-image: linear-gradient(90deg, rgba(51, 255, 133, 0.08), rgba(51, 133, 255, 0.08));
  background: rgba(233, 127, 2, 0.15);
}
.polyhedron--icosahedron__face:nth-child(9) {
  transform: rotate(180deg) rotateY(576deg) rotateX(-10.8113deg);
}
.polyhedron--icosahedron__face:nth-child(9) .polygon:before {
  background-image: linear-gradient(90deg, rgba(51, 133, 255, 0.08), rgba(214, 51, 255, 0.08));
  background: rgba(233, 127, 2, 0.15);
}
.polyhedron--icosahedron__face:nth-child(10) {
  transform: rotate(180deg) rotateY(648deg) rotateX(-10.8113deg);
}
.polyhedron--icosahedron__face:nth-child(10) .polygon:before {
  background-image: linear-gradient(90deg, rgba(214, 51, 255, 0.08), rgba(255, 51, 51, 0.08));
  background: rgba(233, 127, 2, 0.15);
}
.polyhedron--icosahedron__face:nth-child(11) {
  transform: rotateY(684deg) rotateX(-10.8113deg);
}
.polyhedron--icosahedron__face:nth-child(11) .polygon:before {
  background-image: linear-gradient(90deg, rgba(255, 51, 51, 0.08), rgba(214, 255, 51, 0.08));
  background: rgba(233, 127, 2, 0.15);
}
.polyhedron--icosahedron__face:nth-child(12) {
  transform: rotateY(756deg) rotateX(-10.8113deg);
}
.polyhedron--icosahedron__face:nth-child(12) .polygon:before {
  background-image: linear-gradient(90deg, rgba(214, 255, 51, 0.08), rgba(51, 255, 133, 0.08));
  background: rgba(233, 127, 2, 0.15);
}
.polyhedron--icosahedron__face:nth-child(13) {
  transform: rotateY(828deg) rotateX(-10.8113deg);
}
.polyhedron--icosahedron__face:nth-child(13) .polygon:before {
  background-image: linear-gradient(90deg, rgba(51, 255, 133, 0.08), rgba(51, 133, 255, 0.08));
  background: rgba(233, 127, 2, 0.15);
}
.polyhedron--icosahedron__face:nth-child(14) {
  transform: rotateY(900deg) rotateX(-10.8113deg);
}
.polyhedron--icosahedron__face:nth-child(14) .polygon:before {
  background-image: linear-gradient(90deg, rgba(51, 133, 255, 0.08), rgba(214, 51, 255, 0.08));
  background: rgba(233, 127, 2, 0.15);
}
.polyhedron--icosahedron__face:nth-child(15) {
  transform: rotateY(972deg) rotateX(-10.8113deg);
}
.polyhedron--icosahedron__face:nth-child(15) .polygon:before {
  background-image: linear-gradient(90deg, rgba(214, 51, 255, 0.08), rgba(255, 51, 51, 0.08));
  background: rgba(233, 127, 2, 0.15);
}
.polyhedron--icosahedron__face:nth-child(16) {
  transform: rotate(180deg) rotateY(1080deg) rotateX(-52.63008deg) rotate(180deg);
}
.polyhedron--icosahedron__face:nth-child(16) .polygon:before {
  background-image: linear-gradient(90deg, rgba(255, 51, 51, 0.08), rgba(214, 255, 51, 0.08));
  background: rgba(233, 127, 2, 0.15);
}
.polyhedron--icosahedron__face:nth-child(17) {
  transform: rotate(180deg) rotateY(1152deg) rotateX(-52.63008deg) rotate(180deg);
}
.polyhedron--icosahedron__face:nth-child(17) .polygon:before {
  background-image: linear-gradient(90deg, rgba(214, 255, 51, 0.08), rgba(51, 255, 133, 0.08));
  background: rgba(233, 127, 2, 0.15);
}
.polyhedron--icosahedron__face:nth-child(18) {
  transform: rotate(180deg) rotateY(1224deg) rotateX(-52.63008deg) rotate(180deg);
}
.polyhedron--icosahedron__face:nth-child(18) .polygon:before {
  background-image: linear-gradient(90deg, rgba(51, 255, 133, 0.08), rgba(51, 133, 255, 0.08));
  background: rgba(233, 127, 2, 0.15);
}
.polyhedron--icosahedron__face:nth-child(19) {
  transform: rotate(180deg) rotateY(1296deg) rotateX(-52.63008deg) rotate(180deg);
}
.polyhedron--icosahedron__face:nth-child(19) .polygon:before {
  background-image: linear-gradient(90deg, rgba(51, 133, 255, 0.08), rgba(214, 51, 255, 0.08));
  background: rgba(233, 127, 2, 0.15);
}
.polyhedron--icosahedron__face:nth-child(20) {
  transform: rotate(180deg) rotateY(1368deg) rotateX(-52.63008deg) rotate(180deg);
}
.polyhedron--icosahedron__face:nth-child(20) .polygon:before {
  background-image: linear-gradient(90deg, rgba(214, 51, 255, 0.08), rgba(255, 51, 51, 0.08));
  background: rgba(233, 127, 2, 0.15);
}

.stretcher__face:nth-child(1) {
  transform: rotateY(-36deg) rotateX(58.27722deg);
}
.stretcher__face:nth-child(1):before {
  background-image: linear-gradient(90deg, rgba(255, 51, 51, 0.08), rgba(214, 255, 51, 0.08));
}
.stretcher__face:nth-child(2) {
  transform: rotateY(36deg) rotateX(58.27722deg);
}
.stretcher__face:nth-child(2):before {
  background-image: linear-gradient(90deg, rgba(214, 255, 51, 0.08), rgba(51, 255, 133, 0.08));
}
.stretcher__face:nth-child(3) {
  transform: rotateY(108deg) rotateX(58.27722deg);
}
.stretcher__face:nth-child(3):before {
  background-image: linear-gradient(90deg, rgba(51, 255, 133, 0.08), rgba(51, 133, 255, 0.08));
}
.stretcher__face:nth-child(4) {
  transform: rotateY(180deg) rotateX(58.27722deg);
}
.stretcher__face:nth-child(4):before {
  background-image: linear-gradient(90deg, rgba(51, 133, 255, 0.08), rgba(214, 51, 255, 0.08));
}
.stretcher__face:nth-child(5) {
  transform: rotateY(252deg) rotateX(58.27722deg);
}
.stretcher__face:nth-child(5):before {
  background-image: linear-gradient(90deg, rgba(214, 51, 255, 0.08), rgba(255, 51, 51, 0.08));
}
.stretcher__face:nth-child(6) {
  transform: rotateY(0deg) rotateX(31.70218deg) rotate(90deg);
}
.stretcher__face:nth-child(6):before {
  background-image: linear-gradient(90deg, rgba(255, 51, 51, 0.08), rgba(214, 255, 51, 0.08));
}
.stretcher__face:nth-child(7) {
  transform: rotateY(72deg) rotateX(31.70218deg) rotate(90deg);
}
.stretcher__face:nth-child(7):before {
  background-image: linear-gradient(90deg, rgba(214, 255, 51, 0.08), rgba(51, 255, 133, 0.08));
}
.stretcher__face:nth-child(8) {
  transform: rotateY(144deg) rotateX(31.70218deg) rotate(90deg);
}
.stretcher__face:nth-child(8):before {
  background-image: linear-gradient(90deg, rgba(51, 255, 133, 0.08), rgba(51, 133, 255, 0.08));
}
.stretcher__face:nth-child(9) {
  transform: rotateY(216deg) rotateX(31.70218deg) rotate(90deg);
}
.stretcher__face:nth-child(9):before {
  background-image: linear-gradient(90deg, rgba(51, 133, 255, 0.08), rgba(214, 51, 255, 0.08));
}
.stretcher__face:nth-child(10) {
  transform: rotateY(288deg) rotateX(31.70218deg) rotate(90deg);
}
.stretcher__face:nth-child(10):before {
  background-image: linear-gradient(90deg, rgba(214, 51, 255, 0.08), rgba(255, 51, 51, 0.08));
}
.stretcher__face:nth-child(11) {
  transform: rotateY(-18deg) rotate(-31.68993deg);
}
.stretcher__face:nth-child(11):before {
  background-image: linear-gradient(90deg, rgba(255, 51, 51, 0.08), rgba(214, 255, 51, 0.08));
}
.stretcher__face:nth-child(12) {
  transform: rotateY(54deg) rotate(-31.68993deg);
}
.stretcher__face:nth-child(12):before {
  background-image: linear-gradient(90deg, rgba(214, 255, 51, 0.08), rgba(51, 255, 133, 0.08));
}
.stretcher__face:nth-child(13) {
  transform: rotateY(126deg) rotate(-31.68993deg);
}
.stretcher__face:nth-child(13):before {
  background-image: linear-gradient(90deg, rgba(51, 255, 133, 0.08), rgba(51, 133, 255, 0.08));
}
.stretcher__face:nth-child(14) {
  transform: rotateY(198deg) rotate(-31.68993deg);
}
.stretcher__face:nth-child(14):before {
  background-image: linear-gradient(90deg, rgba(51, 133, 255, 0.08), rgba(214, 51, 255, 0.08));
}
.stretcher__face:nth-child(15) {
  transform: rotateY(270deg) rotate(-31.68993deg);
}
.stretcher__face:nth-child(15):before {
  background-image: linear-gradient(90deg, rgba(214, 51, 255, 0.08), rgba(255, 51, 51, 0.08));
}
.stretcher__face:nth-child(16) {
  transform: rotate(180deg) rotateY(0deg) rotateX(58.27722deg);
}
.stretcher__face:nth-child(16):before {
  background-image: linear-gradient(90deg, rgba(255, 51, 51, 0.08), rgba(214, 255, 51, 0.08));
}
.stretcher__face:nth-child(17) {
  transform: rotate(180deg) rotateY(72deg) rotateX(58.27722deg);
}
.stretcher__face:nth-child(17):before {
  background-image: linear-gradient(90deg, rgba(214, 255, 51, 0.08), rgba(51, 255, 133, 0.08));
}
.stretcher__face:nth-child(18) {
  transform: rotate(180deg) rotateY(144deg) rotateX(58.27722deg);
}
.stretcher__face:nth-child(18):before {
  background-image: linear-gradient(90deg, rgba(51, 255, 133, 0.08), rgba(51, 133, 255, 0.08));
}
.stretcher__face:nth-child(19) {
  transform: rotate(180deg) rotateY(216deg) rotateX(58.27722deg);
}
.stretcher__face:nth-child(19):before {
  background-image: linear-gradient(90deg, rgba(51, 133, 255, 0.08), rgba(214, 51, 255, 0.08));
}
.stretcher__face:nth-child(20) {
  transform: rotate(180deg) rotateY(288deg) rotateX(58.27722deg);
}
.stretcher__face:nth-child(20):before {
  background-image: linear-gradient(90deg, rgba(214, 51, 255, 0.08), rgba(255, 51, 51, 0.08));
}
.stretcher__face:nth-child(21) {
  transform: rotate(180deg) rotateY(36deg) rotateX(31.70218deg) rotate(90deg);
}
.stretcher__face:nth-child(21):before {
  background-image: linear-gradient(90deg, rgba(255, 51, 51, 0.08), rgba(214, 255, 51, 0.08));
}
.stretcher__face:nth-child(22) {
  transform: rotate(180deg) rotateY(108deg) rotateX(31.70218deg) rotate(90deg);
}
.stretcher__face:nth-child(22):before {
  background-image: linear-gradient(90deg, rgba(214, 255, 51, 0.08), rgba(51, 255, 133, 0.08));
}
.stretcher__face:nth-child(23) {
  transform: rotate(180deg) rotateY(180deg) rotateX(31.70218deg) rotate(90deg);
}
.stretcher__face:nth-child(23):before {
  background-image: linear-gradient(90deg, rgba(51, 255, 133, 0.08), rgba(51, 133, 255, 0.08));
}
.stretcher__face:nth-child(24) {
  transform: rotate(180deg) rotateY(252deg) rotateX(31.70218deg) rotate(90deg);
}
.stretcher__face:nth-child(24):before {
  background-image: linear-gradient(90deg, rgba(51, 133, 255, 0.08), rgba(214, 51, 255, 0.08));
}
.stretcher__face:nth-child(25) {
  transform: rotate(180deg) rotateY(324deg) rotateX(31.70218deg) rotate(90deg);
}
.stretcher__face:nth-child(25):before {
  background-image: linear-gradient(90deg, rgba(214, 51, 255, 0.08), rgba(255, 51, 51, 0.08));
}
.stretcher__face:nth-child(26) {
  transform: rotate(180deg) rotateY(-18deg) rotate(31.68993deg);
}
.stretcher__face:nth-child(26):before {
  background-image: linear-gradient(90deg, rgba(255, 51, 51, 0.08), rgba(214, 255, 51, 0.08));
}
.stretcher__face:nth-child(27) {
  transform: rotate(180deg) rotateY(54deg) rotate(31.68993deg);
}
.stretcher__face:nth-child(27):before {
  background-image: linear-gradient(90deg, rgba(214, 255, 51, 0.08), rgba(51, 255, 133, 0.08));
}
.stretcher__face:nth-child(28) {
  transform: rotate(180deg) rotateY(126deg) rotate(31.68993deg);
}
.stretcher__face:nth-child(28):before {
  background-image: linear-gradient(90deg, rgba(51, 255, 133, 0.08), rgba(51, 133, 255, 0.08));
}
.stretcher__face:nth-child(29) {
  transform: rotate(180deg) rotateY(198deg) rotate(31.68993deg);
}
.stretcher__face:nth-child(29):before {
  background-image: linear-gradient(90deg, rgba(51, 133, 255, 0.08), rgba(214, 51, 255, 0.08));
}
.stretcher__face:nth-child(30) {
  transform: rotate(180deg) rotateY(270deg) rotate(31.68993deg);
}
.stretcher__face:nth-child(30):before {
  background-image: linear-gradient(90deg, rgba(214, 51, 255, 0.08), rgba(255, 51, 51, 0.08));
}

.transformer {
  animation: ani 9s linear infinite alternate;
}
.polyhedron--dodecahedron .transformer {
  animation-name: ani-penta;
}
.polyhedron--icosahedron .transformer {
  animation-name: ani-tri;
}
.stretchers .transformer {
  animation-name: ani-rect;
}

@keyframes ani-penta {
  0%, 12.5% {
    transform: translateZ(7.23786em) scale(1);
  }
  37.5%, 62.5% {
    transform: translateZ(13.41972em) scale(1);
  }
  87.5%, 100% {
    transform: translateZ(6.18187em) scale(0.001);
  }
}
@keyframes ani-tri {
  0%, 12.5% {
    transform: translateZ(9.10818em) scale(0.001);
  }
  37.5%, 62.5% {
    transform: translateZ(14.02063em) scale(1);
  }
  87.5%, 100% {
    transform: translateZ(4.91245em) scale(1);
  }
}
@keyframes ani-rect {
  0%, 12.5% {
    transform: translateZ(8.50861em) scale(1, 0.001);
  }
  37.5%, 62.5% {
    transform: translateZ(13.76722em) scale(1);
  }
  87.5%, 100% {
    transform: translateZ(5.25861em) scale(0.001, 1);
  }
}
.polygon {
  margin: -3.25em;
  width: 6.5em;
  height: 6.5em;
}
.polygon, .polygon * {
  overflow: hidden;
}
.polygon *, .polygon:before, .polygon:after, .polygon :before, .polygon :after {
  margin: inherit;
  width: inherit;
  height: inherit;
  content: '';
}
.polygon--pentagon {
  margin: -8.50861em;
  width: 17.01722em;
  height: 17.01722em;
  transform: translateY(4.47324em) rotate(-54deg) skewY(18deg) scaleX(0.95106);
}
.polygon--pentagon__inner {
  margin: -8.50861em;
  width: 17.01722em;
  height: 17.01722em;
  transform: scaleX(1.05146) skewY(-18deg) rotate(54deg) translateY(-6.18187em) rotate(18deg) skewY(54deg) scaleX(0.58779);
}
.polygon--pentagon__inner:before {
  border: solid .125em;
  transform: scaleX(1.7013) skewY(-54deg) rotate(-18deg) translateY(-2.32674em);
  background: rgba(73, 10, 61, 0.32);
}
.polygon--pentagon__inner:after {
  background-image: linear-gradient(0deg, #fffacd 0.125em, rgba(0, 0, 0, 0) 0.125em), linear-gradient(-90deg, #fffacd 0.125em, rgba(0, 0, 0, 0) 0.125em);
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 6.5em 100%, 100% 6.5em;
}
.polygon--pentagon:after {
  background-image: linear-gradient(#fffacd 0.125em, rgba(0, 0, 0, 0) 0.125em), linear-gradient(-90deg, #fffacd 0.125em, rgba(0, 0, 0, 0) 0.125em);
  background-position: 100% 0;
  background-repeat: no-repeat;
  background-size: 6.5em 100%, 100% 6.5em;
}
.polygon--triangle {
  border: solid .125em;
  border-right-color: transparent;
  border-bottom-color: transparent;
  transform: translateY(1.87639em) rotate(30deg) skewY(30deg) scaleX(0.86603);
}
.polygon--triangle:before {
  border: solid .125em;
  transform: scaleX(1.1547) skewY(-30deg) rotate(-30deg) translateY(-50%);
  background: rgba(233, 127, 2, 0.32);
}
.polygon--rect:before {
  border: solid .125em;
  background: rgba(138, 155, 15, 0.32);
}
暂无JavaScript代码

👁️ 实时预览