Cube rotation

by Laurent Dufour

HTML

<div id="axis"></div>
<div id="cube">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

:root {
  --size: 40vmin;
  --ax: 1;
  --ay: 1;
  --az: 2;
  --theta: 45deg;
}

body {
  display: flex;
  height: 100vh;
  margin: 0;
  padding: 0;
}

#axis {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 0;
  border: 1px solid #ccc;
  transform-style: preserve-3d;
  transform: rotate3d(var(--ax), var(--ay), var(--az), var(--theta));
}

#cube {
  margin: auto;
  position: relative;
  width: var(--size);
  height: var(--size);
  transform-style: preserve-3d;
}

#cube>div {
  position: absolute;
  width: var(--size);
  height: var(--size);
  opacity: 0.5;
}

#cube>div:nth-of-type(1) {
  transform: translateX(0px) translateY(0px) translateZ(calc(var(--size) / 2));
  background-color: #0ff;
}

#cube>div:nth-of-type(2) {
  transform: rotateX(90deg) translateX(0px) translateY(0px) translateZ(calc(var(--size) / 2));
  background-color: #ff0;
}

#cube>div:nth-of-type(3) {
  transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(calc(var(--size) / 2));
  background-color: #f00;
}

#cube>div:nth-of-type(4) {
  transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(calc(var(--size) / 2));
  background-color: #f0f;
}

#cube>div:nth-of-type(5) {
  transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(calc(var(--size) / 2));
  background-color: #00f;
}

#cube>div:nth-of-type(6) {
  transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(calc(var(--size) / 2));
  background-color: #0f0;
}

#cube {
  animation: ro 10s linear infinite;
  transform-origin: 150px 150px;
}

@keyframes ro {
  0% {
    transform: rotate3d(var(--ax), var(--ay), var(--az), var(--theta)) rotate3d(1, 0, 0, 1deg);
  }

  50% {
    transform: rotate3d(var(--ax), var(--ay), var(--az), var(--theta)) rotate3d(1, 0, 0, 181deg);
  }

  100% {
    transform: rotate3d(var(--ax), var(--ay), var(--az), var(--theta)) rotate3d(1, 0, 0, 361deg);
  }
}