.axes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.axes .rotate {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
}

.axis {
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 150px;
  transform-origin: top center;
}

.main-axis.red-axis {
  transform: rotateZ(90deg) rotateX(180deg) translateY(-50%);
}

.main-axis.green-axis {
  transform: rotateY(-90deg) translateY(-50%);
}

.main-axis.blue-axis {
  transform: rotateX(90deg) translateY(-50%);
}

.perpendicular-axis {
  transform: rotateY(90deg);
}

.red-axis {
  background-image: linear-gradient(
    transparent,
    rgba(255, 0, 0, 0.1) 50%,
    red 50%,
    transparent
  );
}

.green-axis {
  background-image: linear-gradient(
    transparent,
    rgba(0, 255, 0, 0.1) 50%,
    green 50%,
    transparent
  );
}

.blue-axis {
  background-image: linear-gradient(
    transparent,
    rgba(0, 0, 255, 0.1) 50%,
    blue 50%,
    transparent
  );
}