<input id="party" type="checkbox" />
<label for="party" title="Activate party mode!"><span role="img">🎉</span></label>
<div class="scene">
  <div class="plane">
    <div class="cube-squish">
      <div class="cube-spin">
        <div class="cube-shadow"></div>
        <div class="cube-wrap">
          <div class="cuboid demo-cuboid">
            <div class="cuboid__side">
            </div>
            <div class="cuboid__side">
            </div>
            <div class="cuboid__side">
            </div>
            <div class="cuboid__side">
            </div>
            <div class="cuboid__side">
              <div class="cuboid__eyes">
                <div class="cuboid__eye"></div>
                <div class="cubdoi__eye"></div>
              </div>
              <div class="cuboid__mouth"></div>
            </div>
            <div class="cuboid__side">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");

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

body {
  width: 100vw;
  min-height: 100vh;
  font-family: "Exo", Arial, sans-serif;
  background-color: #222;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  gap: 10px;
}

@property --hue {
  syntax: "<integer>";
  inherits: true;
  initial-value: 0;
}

:root {
  --perspective: 1000;
  --cuboid-height: 14;
  --cuboid-width: 14;
  --cuboid-depth: 14;
  --speed: 1.2s;
  --x: 0;
  --y: 0;
  --z: 7;
  --rotate-x: -30;
  --rotate-y: -24;
  --plane-width: 14;
  --plane-height: 14;
  --rotate-cuboid-x: 0;
  --rotate-cuboid-y: 0;
  --rotate-cuboid-z: 0;
}

.scene {
  perspective: calc(var(--perspective, 800) * 1px);
  transform-style: preserve-3d;
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.plane {
  height: calc(var(--plane-height, 25) * 1vmin);
  width: calc(var(--plane-width, 25) * 1vmin);
  transform-style: preserve-3d;
  transform: rotateX(calc(var(--rotate-x, -24) * 1deg))
    rotateY(calc(var(--rotate-y, -24) * 1deg)) rotateX(90deg);
}

.cuboid {
  --width: var(--cuboid-width, 15);
  --height: var(--cuboid-height, 10);
  --depth: var(--cuboid-depth, 4);
  height: calc(var(--depth) * 1vmin);
  width: calc(var(--width) * 1vmin);
  transform-style: preserve-3d;
  position: absolute;
  transform: translate3d(
      calc(var(--x, 4) * 1vmin),
      calc(var(--y, 5) * 1vmin),
      calc(var(--z, 0) * 1vmin)
    )
    rotateX(-90deg) rotateY(calc(var(--rotate-cuboid-y, 0) * 1deg))
    rotateZ(calc(var(--rotate-cuboid-z, 0) * 1deg));
}

.cuboid > div:nth-of-type(1) {
  height: calc(var(--height) * 1vmin);
  width: 100%;
  transform-origin: 50% 50%;
  transform: rotateX(-90deg);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotateX(-90deg)
    translate3d(0, 0, calc((var(--depth) / 2) * 1vmin));
}

.cuboid > div:nth-of-type(2) {
  height: calc(var(--height) * 1vmin);
  width: 100%;
  transform-origin: 50% 50%;
  transform: translate(-50%, -50%) rotateX(-90deg) rotateY(180deg)
    translate3d(0, 0, calc((var(--depth) / 2) * 1vmin));
  position: absolute;
  top: 50%;
  left: 50%;
}

.cuboid > div:nth-of-type(3) {
  height: calc(var(--height) * 1vmin);
  width: calc(var(--depth) * 1vmin);
  transform: translate(-50%, -50%) rotateX(-90deg) rotateY(90deg)
    translate3d(0, 0, calc((var(--width) / 2) * 1vmin));
  position: absolute;
  top: 50%;
  left: 50%;
}

.cuboid > div:nth-of-type(4) {
  height: calc(var(--height) * 1vmin);
  width: calc(var(--depth) * 1vmin);
  transform: translate(-50%, -50%) rotateX(-90deg) rotateY(-90deg)
    translate3d(0, 0, calc((var(--width) / 2) * 1vmin));
  position: absolute;
  top: 50%;
  left: 50%;
}

.cuboid > div:nth-of-type(5) {
  height: calc(var(--depth) * 1vmin);
  width: calc(var(--width) * 1vmin);
  transform: translate(-50%, -50%)
    translate3d(0, 0, calc((var(--height) / 2) * 1vmin));
  position: absolute;
  top: 50%;
  left: 50%;
}

.cuboid > div:nth-of-type(6) {
  height: calc(var(--depth) * 1vmin);
  width: calc(var(--width) * 1vmin);
  transform: translate(-50%, -50%)
    translate3d(0, 0, calc((var(--height) / 2) * -1vmin)) rotateX(180deg);
  position: absolute;
  top: 50%;
  left: 50%;
}

.demo-cuboid > div {
  background: hsl(180, 50%, calc(var(--lightness, 50) * 1%));
}

.demo-cuboid > div:nth-of-type(1),
.demo-cuboid > div:nth-of-type(5) {
  --lightness: 40;
}

.demo-cuboid > div:nth-of-type(2),
.demo-cuboid > div:nth-of-type(4) {
  --lightness: 50;
}

.demo-cuboid > div:nth-of-type(3) {
  --lightness: 60;
}

.cube-shadow {
  height: 100%;
  width: 100%;
  background: #40bfbf;
  filter: blur(15px);
  position: absolute;
}

.cube-spin,
.cube-squish,
.cube-wrap {
  height: 100%;
  width: 100%;
  transform-style: preserve-3d;
}

.cuboid__mouth {
  position: absolute;
  height: 3vmin;
  width: 3vmin;
  border-radius: 50%;
  background: #000;
  overflow: hidden;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  clip-path: inset(50% 0 0 0);
}

.cuboid__mouth:after {
  content: "";
  height: 35%;
  width: 45%;
  border-radius: 50%;
  position: absolute;
  bottom: -10%;
  right: 0;
  background: #e63b19;
}

.cuboid__eyes {
  width: 80%;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, 0%);
  animation: blink 5s infinite;
}

.cuboid__eyes > div {
  height: 2vmin;
  width: 2vmin;
  border-radius: 50%;
  background: #000;
  position: absolute;
  transform: translate(0, -50%);
}

.cuboid__eyes > div:after {
  content: "";
  background: #fff;
  height: 20%;
  width: 20%;
  border-radius: 50%;
  position: absolute;
  top: 20%;
  left: 20%;
}

.cuboid__eyes > div:nth-of-type(1) {
  left: 0;
}

.cuboid__eyes > div:nth-of-type(2) {
  right: 0;
}

:checked ~ .scene {
  animation: party var(--speed) infinite linear;
}

:checked ~ .scene .cuboid {
  animation: flip calc(var(--speed) * 2) infinite ease-out;
}

:checked ~ .scene .cube-shadow {
  animation: shadow var(--speed) infinite ease-out;
}

:checked ~ .scene .cube-spin {
  animation: spin calc(var(--speed) * 2) var(--speed) infinite ease-out;
}

:checked ~ .scene .cube-squish {
  animation: squish var(--speed) infinite ease-out;
}

:checked ~ .scene .cube-wrap {
  animation: jump var(--speed) infinite ease-out;
}

:checked ~ .scene .cube-shadow {
  background: hsla(var(--hue, 0), 80%, 50%, 0.5);
}

:checked ~ .scene .demo-cuboid > div {
  background: hsl(var(--hue, 0), 80%, calc(var(--lightness, 50) * 1%));
}

:checked ~ label {
  --on: 1;
}

:checked ~ label span {
  animation: rock 0.1s infinite linear alternate;
}

input {
  opacity: 0;
  height: 0;
  width: 0;
  position: fixed;
  left: 100%;
}
label {
  --on: 0;
  height: 2rem;
  width: 4rem;
  background: transparent;
  border-radius: 25%/50%;
  border: 2px solid #fff;
  display: block;
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: grayscale(calc(1 - var(--on)));
  cursor: pointer;
  z-index: 2;
}

span {
  display: inline-block;
  font-size: 2rem;
  line-height: 2rem;
  transform: translate(calc(var(--on) * 100%), 0);
  transition: transform 0.1s, filter 0.1s;
}

@keyframes spin {
  0%,
  10% {
    transform: rotate(0deg);
  }
  40%,
  50%,
  100% {
    transform: rotate(360deg);
  }
}

@keyframes flip {
  0%,
  10% {
    transform: translate3d(
        calc(var(--x, 0) * 1vmin),
        calc(var(--y, 0) * 1vmin),
        calc(var(--z, 5) * 1vmin)
      )
      rotateX(-90deg) rotateY(calc(var(--rotate-cuboid-y, 0) * 1deg))
      rotateZ(calc(var(--rotate-cuboid-z, 0) * 1deg));
  }
  40%,
  50%,
  100% {
    transform: translate3d(
        calc(var(--x, 0) * 1vmin),
        calc(var(--y, 0) * 1vmin),
        calc(var(--z, 5) * 1vmin)
      )
      rotateX(270deg) rotateY(calc(var(--rotate-cuboid-y, 0) * 1deg))
      rotateZ(calc(var(--rotate-cuboid-z, 0) * 1deg));
  }
}

@keyframes squish {
  0%,
  100% {
    transform: scaleZ(1) scale(1);
  }
  15% {
    transform: scaleZ(0.5) scale(1.15);
  }
  50%,
  85% {
    transform: scaleZ(1.25) scale(0.5);
  }
}

@keyframes jump {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  15%,
  95% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, 0, 20vmin);
  }
}

@keyframes shadow {
  0%,
  15%,
  85%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  25%,
  75% {
    transform: scale(0.65);
    opacity: 0.35;
  }
}

@keyframes blink {
  0%,
  47%,
  49%,
  51%,
  100% {
    transform: translate(-50%, -100%) scaleY(1);
  }
  48%,
  50% {
    transform: translate(-50%, -100%) scaleY(0.1);
  }
}

@keyframes party {
  to {
    --hue: 360;
  }
}

@keyframes rock {
  0% {
    transform: translate(calc(var(--on) * 100%), 0) rotate(-5deg);
  }
  100% {
    transform: translate(calc(var(--on) * 100%), 0) rotate(5deg);
  }
}