#cssSphere {
    position: absolute;
    transform-style: preserve-3d;
    left: 50vw;
    top: 50vh;
    user-select: none;
    transform: perspective(600px) translateX(0) translateY(0) translateZ(0) rotateX(0) rotateY(0) rotateZ(0);
    transform-origin: 0 0;
    z-index: 99;
}

.cssSphereElement {
    display: none;
}

.three-d {
    position: absolute;
    transform-style: preserve-3d;
}
.controller-handle-side {
    width: 150px;
    height: 8px;
    opacity: 0.3;
}
.handle {
    top: 0;
    left: 0;
}
.Translation-knob,
.Rotation-knob,
.Scale-knob {
    opacity: 0.3;
}
.Translation-knob:hover,
.Rotation-knob:hover,
.Scale-knob:hover,
.Translation-knob.active_knob,
.Rotation-knob.active_knob,
.Scale-knob.active_knob  {
    opacity: 1;
}
.x-axis-color {
    background-color: #22F;
}
.x-axis-transform {
    transform: translateX(16px);
}
.y-axis-color {
    background-color: #0f0;
}
.y-axis-transform {
    transform: translateZ(16px) rotateX(90deg) rotateZ(90deg);
}
.z-axis-color {
    background-color: #f00;
}
.z-axis-transform {
    transform: translateX(-8px) translateY(16px) rotateX(90deg) rotateY(90deg)
}
.Translation-knob {
    transform: translateX(150px) translateY(-12px) translateZ(4px);
}
.Translation-knob-side {
    width: 0;
    height: 0;
    border-left: 16px solid transparent;
    border-top: 16px solid transparent;
    border-bottom: 16px solid transparent;
}
.Translation-knob-side.x-axis-color {
    border-left: 48px solid #22F;
    background-color: transparent;
}
.Translation-knob-side.y-axis-color {
    border-left: 48px solid #0f0;
    background-color: transparent;
}
.Translation-knob-side.z-axis-color {
    border-left: 48px solid #f00;
    background-color: transparent;
}

.Rotation-knob,
.Rotation-knob,
.Rotation-knob {
    width: 0;
    height: 0;
    position: relative;
    background-color: transparent;
    transform: translateX(-50px) translateY(-250px)  translateZ(250px) rotateY(90deg);
}
.Rotation-knob.x-axis-color::after,
.Rotation-knob.y-axis-color::after,
.Rotation-knob.z-axis-color::after {
   content: "";
   position: absolute;
   width: 500px;
   height: 500px;
   z-index: -1;
   border-bottom: 50px solid blue;
   border-radius: 100%;
}
.Rotation-knob.y-axis-color::after {
   border-right: 30px solid green;
   border-bottom: 30px solid green;
   border-left: none;
}
.Rotation-knob.z-axis-color::after {
   border-left: 15px solid red;
   border-bottom: none;
}

.Scale-knob {
    transform: translateX(50px) translateY(-11px);
}
.Scale-knob-side {
    width: 30px;
    height: 30px;
}