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 class="cube-button">
<input type="checkbox" id="toggle">
<label for="toggle"></label>
<div class="cube">
<div class="face front"><span>Click Me</span></div>
<div class="face left"></div>
<div class="face right"></div>
<div class="face back"></div>
<div class="face top"></div>
<div class="face bottom"></div>
</div>
</div>