My "checkbox hack" isn't doing anything when in the toggled state.

I have a 3d cube that is rotating and I want it to sorta spin and get bigger when it is clicked on, so I tried using the checkbox hack in order to change the animation when it is in the toggled state. However, regardless of what I do (i.e. change background color of elements, change font size, change scale of .cube, etc.) Absolutely nothing happens when the label is in toggle state. Can someone help me figure out what I did wrong?

Here is my current code.

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

html {
  width: 100vw;
  height: auto;
}

body {
  width: 100%;
  height: 100%;
  background-color: antiquewhite;
  color: #333;
  font-size: 100px;
}

.cube {
  transform-style: preserve-3d;
  transform-origin: right;
  top: calc(50%);
  left: calc(50%);
  position: absolute;
  animation: rotateCube 8s infinite linear;
}

label {
  position: absolute;
  top: calc(50% - 1em);
  left: calc(50% - 1em);
  height: 2em;
  width: 2em;
  z-index: 10;
}

#toggle {
  position: absolute;
  opacity: 1;
}

.face {
  height: 2em;
  width: 2em;
  background-color: whitesmoke;
  position: absolute;
  margin: -1em;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 1px 1px 2px #555, inset -1px 0px 2px #555;
}

.face span {
  font-size: 50px;
}

.front {
  transform: translateZ(1em);
}

.right {
  transform: rotateY(90deg) translateZ(1em);
}

.back {
  transform: rotateY(180deg) translateZ(1em);
}

.left {
  transform: rotateY(-90deg) translateZ(1em);
}

.top {
  transform: rotateX(90deg) translateZ(1em);
}

.bottom {
  transform: rotateX(-90deg) translateZ(1em)
}

input:checked~.face {
  background-color: blue;
  animation: rotateCube2 8s forwards;
}

@keyframes rotateCube {
  0% {
    transform: rotateY(0deg) rotateX(-15deg);
  }
  50% {
    transform: rotateY(360deg) rotateX(15deg)
  }
  100% {
    transform: rotateY(720deg) rotateX(-15deg)
  }
}

@keyframes rotateCube2 {
  50% {
    transform: rotateY(90deg) rotateX(90deg);
  }
  100% {
    transform: rotateY(180deg) rotateX(180deg);
  }
}

<div >
  <input type="checkbox" id="toggle">
  <label for="toggle"></label>
  <div >
    <div ><span>Click Me</span></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
  </div>
</div>

CodePudding user response：

The problem occurs here -

The above selector says that the checked state input will look out for all its siblings that comes after it in the DOM... The Problem is, there is no sibling with a class face

There is only one sibling with a class cube

So to modify the styles of .face when input is checked, the CSS selector will look something like this

input:checked ~ .cube > .face { ... }

and to modify the styles of .cube -

input:checked ~ .cube { ... }