:root
 {        
        --CUBE_CONTAINER_WIDTH:800;
        --CUBE_CONTAINER_HEIGHT:200;            

        --WIDTH_VALUE_TYPE:     1px;
        --HEIGHT_VALUE_TYPE:    1px;
 }

.cube_container.cube                            
{ 
        --CUBE_MARGIN_RIGHT                     :0;                 
        --CUBE_WIDTH                            :var(--CUBE_CONTAINER_WIDTH);
        --CUBE_HEIGHT                           :var(--CUBE_CONTAINER_HEIGHT);
        
        --CUBE_SCALE_X:1;
        --CUBE_SCALE_Y:1;
        --CUBE_SCALE_Z:1;     
        
        position:absolute;        
        left:   calc(50% - ((var(--CUBE_CONTAINER_WIDTH) / 2) * var(--WIDTH_VALUE_TYPE) )); 
        top:    calc(20% - ((var(--CUBE_CONTAINER_HEIGHT) / 2) * var(--WIDTH_VALUE_TYPE) ));

        width:calc(var(--CUBE_CONTAINER_WIDTH) * var(--WIDTH_VALUE_TYPE) );
        height:calc(var(--CUBE_CONTAINER_HEIGHT) * var(--HEIGHT_VALUE_TYPE) );

        transform-style: preserve-3d; 
        transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(var(--CUBE_SCALE_X)) scaleY(var(--CUBE_SCALE_Y)) scaleZ(var(--CUBE_SCALE_Z));
}

.cube_container.cube > .face
{
        background-color:rgb(0 255 0 / 0%);
}
 
.cube.graph_point_cube
{
        --CUBE_SCALE_X:1.45;
        --CUBE_SCALE_Y:.5;
        --CUBE_SCALE_Z:7;     
        --CUBE_MARGIN_RIGHT:29;     

        position:relative;
        left:0;
        bottom:calc(-180 * var(--WIDTH_VALUE_TYPE));         
        
        width:calc(var(--CUBE_WIDTH) * var(--WIDTH_VALUE_TYPE) );
        height:calc(var(--CUBE_HEIGHT) * var(--HEIGHT_VALUE_TYPE) );
        
        display:inline-block;
        margin-right:calc(var(--CUBE_MARGIN_RIGHT) * var(--WIDTH_VALUE_TYPE));
        
        transform:rotateX(-14deg) rotateY(-14deg) rotateZ(0deg) scaleX(var(--CUBE_SCALE_X)) scaleY(var(--CUBE_SCALE_Y)) scaleZ(var(--CUBE_SCALE_Z));
}
.cube.graph_point_cube .face
{
        background-color:rgb(0, 255, 0, 10%);
        background:linear-gradient(green, black);
}
.cube 
{      
        --CUBE_WIDTH:10;
        --CUBE_HEIGHT:10;
        
        --CUBE_SCALE_X:.45;
        --CUBE_SCALE_Y:2;
        --CUBE_SCALE_Z:5;                        
        
        position:relative;
        
        width:calc(var(--CUBE_WIDTH) * var(--WIDTH_VALUE_TYPE) );
        height:calc(var(--CUBE_HEIGHT) * var(--HEIGHT_VALUE_TYPE) );

        transform-style: preserve-3d;
        transform-origin:bottom; 
        transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(var(--CUBE_SCALE_X)) scaleY(var(--CUBE_SCALE_Y)) scaleZ(var(--CUBE_SCALE_Z));
}
.cube .face 
{
        position:absolute;
        
        width:calc(var(--CUBE_WIDTH) * var(--HEIGHT_VALUE_TYPE) );
        height:calc(var(--CUBE_HEIGHT) * var(--HEIGHT_VALUE_TYPE) );
}

.control.configuration_1_control:hover ~ #cube_container .cube.graph_point_cube,
.control.configuration_1_control:active ~ #cube_container .cube.graph_point_cube
{        
        --CUBE_SCALE_X:.45;
        --CUBE_SCALE_Y:2.85;
        --CUBE_SCALE_Z:15;     
        --CUBE_MARGIN_RIGHT:29;   
}
.control.configuration_3_control:hover ~ #cube_container .cube.graph_point_cube,
.control.configuration_3_control:active ~ #cube_container .cube.graph_point_cube
{        
        --CUBE_SCALE_X:2.45;
        --CUBE_SCALE_Y:4.85;
        --CUBE_SCALE_Z:15;     
        --CUBE_MARGIN_RIGHT:29;   
        transform:rotateX(-11deg) rotateY(11deg) rotateZ(0deg) scaleX(var(--CUBE_SCALE_X)) scaleY(var(--CUBE_SCALE_Y)) scaleZ(var(--CUBE_SCALE_Z));
}

.control.configuration_4_control:active ~ #cube_container .cube.graph_point_cube
{        
        --CUBE_SCALE_X:1.95;
        --CUBE_SCALE_Y:4.85;
        --CUBE_SCALE_Z:15;     
        --CUBE_MARGIN_RIGHT:29;   
        transform:rotateX(-11deg) rotateY(-11deg) rotateZ(0deg) scaleX(var(--CUBE_SCALE_X)) scaleY(var(--CUBE_SCALE_Y)) scaleZ(var(--CUBE_SCALE_Z));
}

.control.configuration_1_control:hover ~ #cube_container .cube.graph_point_cube .face,
.control.configuration_1_control:active ~ #cube_container .cube.graph_point_cube .face
{        
        background:linear-gradient( #0000FF, #FFFF00);
}

.control.configuration_2_control:hover ~ #cube_container .cube.graph_point_cube .face,
.control.configuration_2_control:active ~ #cube_container .cube.graph_point_cube .face
{
        background:linear-gradient(yellow, purple);
        opacity:95%;
}

.control.configuration_3_control:hover ~ #cube_container .cube.graph_point_cube .face,
.control.configuration_3_control:active ~ #cube_container .cube.graph_point_cube .face
{       
        background:linear-gradient(green, rgba(255, 0, 0, 80%));
        opacity:75%;
}

.control.configuration_4_control:hover ~ #cube_container .cube.graph_point_cube .face,
.control.configuration_4_control:active ~ #cube_container .cube.graph_point_cube .face
{
        background:linear-gradient(Violet, Indigo, Blue, Green, Yellow, Orange, Red);
        opacity:55%;
}

.control 
{ 
        position:relative ;
        left:30%;
        top:40%;
        display:inline-block;
        margin:40px 0px 0px 20px;

        font-family:arial;
}