:root
{
        --ANIMATION_DURATION:5s;
        --TRANSTION_DURATION:1s;
}

.stage 
{
        /* outline:7px solid red; */
        position:absolute;
        top:10%;
        left:30%;
        width:300px; 
        height:200px;
}
.control 
{ 
        margin:20 0 0 0; 
        text-transform:capitalize; 
}

.scene 
{            
        /* outline:3px solid red; */
        position:absolute;
        top:75%;
        left:15vw;
        width:200px;
        height:200px;
	margin-left:15px;

        transform-style:preserve-3d;
        perspective:600px;

        rotate:x 20deg;
}

.cube 
{
        position:absolute; 
        width:200px; 
        height:200px; 
        
        transform-style:preserve-3d;
        transition:var(--TRANSTION_DURATION);
}

.face                          
{ 
        position:absolute; 
        width:100%;
        height:100%;
        opacity:35%; 
        box-shadow: 2px 2px 1px silver, 1px 1px 36px inset silver;
}


.multi_cube.cube .face:nth-of-type(1)          { background-color:transparent;                     transform: rotateY(0deg)        translateZ(100px); }
.multi_cube.cube .face:nth-of-type(2)          { background-color:transparent;                     transform: rotateY(90deg)       translateZ(100px); } 
.multi_cube.cube .face:nth-of-type(3)          { background-color: rgba(0 255 0 /25);        transform: rotateY(180deg)      translateZ(100px); } 
.multi_cube.cube .face:nth-of-type(4)          { background-color:transparent;                     transform: rotateY(-90deg)      translateZ(100px); } 
.multi_cube.cube .face:nth-of-type(5)          { background-color:transparent;                     transform: rotateX(90deg)       translateZ(100px); } 
.multi_cube.cube .face:nth-of-type(6)          { background-color:transparent;                     transform: rotateX(-90deg)      translateZ(100px); }
 

.show_front_control:hover       ~ div[class="scene"] .cube, 
.show_front_control:active      ~ div[class="scene"] .cube      { transition:2s; transform: translateZ(-100px) rotateY(0deg); }                    

.show_right_control:hover       ~ div[class="scene"] .cube,
.show_right_control:active      ~ div[class="scene"] .cube     { transform: translateZ(-100px) rotateY( -90deg); }                        

.show_back_control:hover        ~ div[class="scene"] .cube,
.show_back_control:active       ~ div[class="scene"] .cube     { transform: translateZ(-100px) rotateY(-180deg); }

.show_left_control:hover        ~ div[class="scene"] .cube,
.show_left_control:active       ~ div[class="scene"] .cube      { transform: translateZ(-100px) rotateY(  90deg); }

.show_top_control:hover         ~ div[class="scene"] .cube,
.show_top_control:active        ~ div[class="scene"] .cube      { transform: translateZ(-100px) rotateX( -90deg); }                        

.show_bottom_control:hover      ~ div[class="scene"] .cube,
.show_bottom_control:active     ~ div[class="scene"] .cube      { transform: translateZ(-100px) rotateX(  90deg); }

  
div.rotate_x_control:hover ~ div[class="scene"] .cube, 
div.rotate_x_control:active ~ div[class="scene"] .cube, 
.rotate_x 
{ 
        animation-name: cube_animation_rotate_x;  
        animation-duration: var(--ANIMATION_DURATION); 
}

div.rotate_y_control:hover ~ div[class="scene"] .cube,
div.rotate_y_control:active ~ div[class="scene"] .cube,
div.rotate_y
{
        animation-name: cube_animation_rotate_y;
        animation-duration: var(--ANIMATION_DURATION); 
}
  
.rotate_z_control:hover ~ div[class="scene"] .cube,
.rotate_z_control:active ~ div[class="scene"] .cube,
.rotate_z_control
{
        animation-name: cube_animation_rotate_z;
        animation-duration: var(--ANIMATION_DURATION); 
}

.rotate_new_control:hover ~ div[class="scene"] .cube,
.rotate_new_control:active ~ div[class="scene"] .cube,
.rotate_new_control
{
        animation-name: cube_animation_rotate_alpha;
        animation-duration: var(--ANIMATION_DURATION); 
}


/* ANIMATION */  
@keyframes cube_animation_rotate_x
{
        from    { transform:rotateX(0deg); }
        to      { transform:rotateX(360deg);}
}


@keyframes cube_animation_rotate_y
{
        from    { transform:rotateY(0deg); }
        to      { transform:rotateY(360deg);}
}


@keyframes cube_animation_rotate_z
{
        from    { transform:rotateZ(0deg); }
        to      { transform:rotateZ(360deg);}
}

@keyframes cube_animation_rotate_alpha
{
        from    { transform:rotateX(.125deg) rotateY(.125deg) rotateZ(.1deg); color:blue;}
                /* rotate:.125 .125 .1 0deg;  */
        /* to      { rotate:.125 .125 .1 360deg; color:blue;} */
        
        to    { transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg); color:blue;}
}

.not-user-selectable 
{ 
        -webkit-user-select: none; 
        -webkit-touch-callout: none; 
        -moz-user-select: none; 
        -ms-user-select: none; 
        user-select: none;    
        color: #cc0000;
}