<input type="checkbox" id="x" />
<label for="x">x</label>

<input type="checkbox" id="y" />
<label for="y">y</label>

<input type="checkbox" id="z" />
<label for="z">z</label>

<div class="box"></div>
.box {
  transform: rotateX(var(--x, 0)) rotateY(var(--y, 0)) rotateZ(var(--z, 0));
  background: #000;
  width: 200px;
  height: 200px;
  transition: transform 0.7s linear;
}

#x:checked ~ .box {
  --x: 180deg;
}

#y:checked ~ .box {
  --y: 180deg;
}

#z:checked ~ .box {
  --z: 180deg;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.