* {
    margin: 0;
    padding: 0;
}

:root {
    --size: 100px;
    --space: 10px;
    --m1: 1;
    --m2: 0.1;
    --m3: 0.3;
    --m4: 0;
    --m5: -7;
    --m6: 2;
    --m7: 0;
    --m8: 0;
    --m9: 0;
    --m10: 2;
    --m11: 3;
    --m12: 0.01;
    --m13: 5;
    --m14: 0;
    --m15: 0;
    --m16: 1;
}

.container {
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cube {
  width: var(--size);
  height: var(--size);
  transform-style: preserve-3d;
  margin: 50px auto;
  animation: 3s linear 0s infinite normal both running cube-animation;
}

@keyframes cube-animation {
    0% {
        transform: rotate3d(-1, 2, 1, 0deg)
        matrix3d(
            1, 0, 0, 0,
            0, 1, 0, 0,
            0, 0, 1, 0,
            0, 0, 0, 1
        );
    }
    50% {
        transform: rotate3d(-1, 2, 1, 180deg)
        matrix3d(
            var(--m1), var(--m2), var(--m3), var(--m4),
            var(--m5), var(--m6), var(--m7), var(--m8),
            var(--m9), var(--m10), var(--m11), var(--m12),
            var(--m13), var(--m14), var(--m15), var(--m16)
        );
    }
    100% {
        transform: rotate3d(-1, 2, 1, 360deg)
        matrix3d(
            1, 0, 0, 0,
            0, 1, 0, 0,
            0, 0, 1, 0,
            0, 0, 0, 1
        );
    }
}

img {
  width: 100%;
  height: 100%;
  position: absolute;
}

.front {
  transform: translateZ(calc(var(--size) / 2 + var(--space)));
}

.back {
  transform: rotateY(180deg) translateZ(calc(var(--size) / 2 + var(--space)));
}

.right {
  transform: rotateY(90deg) translateZ(calc(var(--size) / 2 + var(--space)));
}

.left {
  transform: rotateY(-90deg) translateZ(calc(var(--size) / 2 + var(--space)));
}

.top {
  transform: rotateX(90deg) translateZ(calc(var(--size) / 2 + var(--space)));
}

.bottom {
  transform: rotateX(-90deg) translateZ(calc(var(--size) / 2 + var(--space)));
}

.floating-control {
    padding: 10px;
    width: fit-content;
    gap: 10px;
    position: absolute;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    z-index: 10000000000;
}

.floating-control input {
    width: 60px;
}