<input type="checkbox" name="playPause" id="playPause">

<label for="playPause">
  <div class="triangle">
    <div class="square"></div>
  </div>
</label>

<div class="scene">
  <div class="dodecahedron">
    <div class="wall side"></div>
    <div class="wall side"></div>
    <div class="wall side"></div>
    <div class="wall side"></div>
    <div class="wall side"></div>
    <div class="wall side"></div>
    <div class="wall side"></div>
    <div class="wall side"></div>
    <div class="wall side"></div>
    <div class="wall side"></div>
    <div class="wall lid"></div>
    <div class="wall lid"></div>
  </div>
</div>

input {
  display: none;
}

label {
  perspective: 200em;
  display: grid;
  align-items: center;
  margin: 50vh 50vw
}

label, .triangle, .square {
  transition: all 1s ease-in-out;
}

.triangle {
  --gradAngle: atan(.5);
  width: 40em;
  aspect-ratio: 1;
  background-image: conic-gradient(from calc(270deg - var(--gradAngle)) at 100% 50%, #000 0 calc(var(--gradAngle)*2), #0000 calc(var(--gradAngle)*2));
  transform: translateX(0) rotateY(30deg);
}

.triangle:hover {
  transform: translateX(-50%);
}

.square {
  inset: 0;
  background-image: linear-gradient(45deg,fuchsia,blue);
  filter: grayscale(1);
  transform-origin: 0 0;
  rotate: y 90deg;
  clip-path: polygon(0 0, 0 100%, 50% 100%, 50% 0, 50% 0, 50% 100%, 100% 100%, 100% 0);
}

#playPause:not(:checked) ~ .scene .dodecahedron {
  animation-play-state: paused;
}

#playPause:checked ~ label {
  margin: 30em 30em;
}

#playPause:checked ~ label .triangle {
  transform: translateX(0) rotateY(90deg);
}

#playPause:checked ~ label .square {
  filter: none;
  clip-path: polygon(0 0, 0 100%, 33% 100%, 33% 0, 67% 0, 67% 100%, 100% 100%, 100% 0);
}

body {
  margin: 0;
  box-sizing: border-box;
  background: #000;
  height: 100vh;
  display: grid;
  font-size: .5vh;
}

body * {
  position: absolute;
  transform-style: preserve-3d;
}

.scene, .dodecahedron {
  display: flex;
  justify-content: center;
  align-items: center;
}

.scene {
  place-self: center;
  width: 100em;
  aspect-ratio: 1;
  perspective: 250em;
  z-index: -1;
}

.dodecahedron {
  --ngon: 5;
  --unit: calc(1em*var(--unitScale));
  --triAngle: calc(360deg/var(--ngon)); /* the central angle of the pentagon's triangular slice */
  --a3gon: calc( sin( calc( var(--triAngle)/2 ) ) * 100 ); /* the base of a pentagon's triangular slice*/
  --h3gon: calc( cos( calc( var(--triAngle)/2 ) ) * 50); /* the height of a pentagon's triangular slice*/
  --h5gon: calc(var(--h3gon) + 50); /* total height of that same pentagon */
  --pentAngle: asin(calc(var(--h3gon)/var(--h5gon))); /* the angle that the pentagon would be inclined at if it were leaning against the center pivot axis of another pentagon */
  --pentH: calc(cos(var(--pentAngle)) * var(--h5gon)); /* the height at which the tip of that pentagon touches the pivot axis */
  --median: calc((var(--a3gon)*sin(var(--triAngle)) + var(--h5gon))/2); /* the median value of the triangular slice's height and the pentagon's height */
  --Hratio: calc(var(--median)/var(--h5gon)); /* ratio of the median and the pentagram's height */
  --dodecaH: calc(var(--pentH)*var(--Hratio)); /* the height of the dodecahedron */
  --unitScale: calc(50/var(--dodecaH));
  inset: calc(50*(1em - var(--unit)));
  animation: spin 6s linear infinite;
}

.lid {
  transform: rotateX(calc(-90deg*var(--dir))) translateZ(calc(var(--dodecaH)*var(--unit)));
}

.wall:nth-child(2n+1) {
  --dir: 1;
}

.wall:nth-child(2n) {
  --dir: -1;
}

.side {
  transform: rotateY(calc(var(--step)*var(--triAngle) + .5turn))  rotateX(calc(var(--pentAngle)*-1 + 90deg + 90deg*var(--dir))) translateZ(calc(var(--dodecaH)*var(--unit)));
}

.wall {
  inset: 0;
  background-image: radial-gradient(at 0 0, hsla( calc(var(--triAngle)*var(--step)) 100% 50% / 1 ), hsla( calc(var(--triAngle)*var(--step) + 90deg) 100% 50% / 0 ));
  clip-path: polygon( 
    calc((1 - sin(calc(0*72deg)))*50%) calc((1 - cos(calc(0*72deg)))*50%),
    calc((1 - sin(calc(1*72deg)))*50%) calc((1 - cos(calc(1*72deg)))*50%),
    calc((1 - sin(calc(2*72deg)))*50%) calc((1 - cos(calc(2*72deg)))*50%),
    calc((1 - sin(calc(3*72deg)))*50%) calc((1 - cos(calc(3*72deg)))*50%),
    calc((1 - sin(calc(4*72deg)))*50%) calc((1 - cos(calc(4*72deg)))*50%)
    );
}

.wall:nth-child(1), .wall:nth-child(2) {
  --step: 0;
}

.wall:nth-child(3), .wall:nth-child(4) {
  --step: 1;
}

.wall:nth-child(5), .wall:nth-child(6) {
  --step: 2;
}

.wall:nth-child(7), .wall:nth-child(8) {
  --step: 3;
}

.wall:nth-child(9), .wall:nth-child(10) {
  --step: 4;
}

.wall:nth-child(11), .wall:nth-child(12) {
  --step: 5;
}

@keyframes spin {
  100% {
    rotate: y 360deg;
  }
}

@media (orientation:portrait) {
  body {
    font-size: .5vw;
  }
}