.box-field {

        display: none;

        position: absolute;
        left: 50px;
        top: 50px;
        width: 200px; 
        height: 200px; 

        transform: scale(0.5);

        z-index: 100;
    }

    body.drop-cube .box-curtain-xx, body.drop-cube .box-field {
        display: block;
    }

    .box3d {
        width: 200px; height: 200px; 
        margin: 0;
        position: relative;
        -webkit-transform-style:preserve-3d;
    }

    .box3d > div {

        position: absolute; 
        left:0; top:0; width:200px; height:200px;

        -webkit-backface-visibility: hidden; 
        -webkit-transform-origin:50% 50% -100px;

        /*opacity: 0.5;*/
 
        backface-visibility: hidden; 
        transform-origin:50% 50% -100px;

        background-color: white;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 80%;

        border: 1px solid;
        border-radius: 50px;

        box-shadow: inset -5px -5px 10px gray;
    }

    .p1 {
        background-image: url("DropCube/Image01.png");
        transform: perspective(600px) rotateX(0deg) rotateY(90deg) rotateZ(0deg);
    }
    .p2 { background-image: url("DropCube/Image02.png"); }
    .p3 { background-image: url("DropCube/Image03.png"); }
    .p4 { background-image: url("DropCube/Image04.png"); }
    .p5 { background-image: url("DropCube/Image05.png"); }
    .p6 { background-image: url("DropCube/Image06.png"); }

    .box3d.animate > .p1 { animation:spin1 0.75s infinite linear; }
    .box3d.animate > .p2 { animation:spin2 0.75s infinite linear; }
    .box3d.animate > .p3 { animation:spin3 0.75s infinite linear; }
    .box3d.animate > .p4 { animation:spin4 0.75s infinite linear; }
    .box3d.animate > .p5 { animation:spin5 0.75s infinite linear; }
    .box3d.animate > .p6 { animation:spin6 0.75s infinite linear; }

    .box3d.active1, .box3d.active1 .p1,  
    .box3d.active2, .box3d.active2 .p2, 
    .box3d.active3, .box3d.active3 .p3,
    .box3d.active4, .box3d.active4 .p4,  
    .box3d.active5, .box3d.active5 .p5, 
    .box3d.active6, .box3d.active6 .p6 {
        transform: perspective(600px) rotate(180deg);
    }

    .box3d.active1 .p2, .box3d.active1 .p3, .box3d.active1 .p4, .box3d.active1 .p5, .box3d.active1 .p6, 
    .box3d.active2 .p1, .box3d.active2 .p3, .box3d.active2 .p4, .box3d.active2 .p5, .box3d.active2 .p6,
    .box3d.active3 .p1, .box3d.active3 .p2, .box3d.active3 .p4, .box3d.active3 .p5, .box3d.active3 .p6,
    .box3d.active4 .p1, .box3d.active4 .p2, .box3d.active4 .p3, .box3d.active4 .p5, .box3d.active4 .p6, 
    .box3d.active5 .p1, .box3d.active5 .p2, .box3d.active5 .p3, .box3d.active5 .p4, .box3d.active5 .p6,
    .box3d.active6 .p1, .box3d.active6 .p2, .box3d.active6 .p3, .box3d.active6 .p4, .box3d.active6 .p5 {
        display: none;
    }

    @keyframes spin1 {
        0% {transform: perspective(600px) rotateX(0deg) rotateY(90deg) rotateZ(0deg);}
        to {transform: perspective(600px) rotateX(360deg) rotateY(450deg) rotateZ(0deg);}
    }
    @keyframes spin2 {
        0% {transform:perspective(600px) rotateX(0deg) rotateY(270deg) rotateZ(0deg);}
        100% {transform:perspective(600px) rotateX(360deg) rotateY(630deg) rotateZ(0deg);}
    }
    @keyframes spin3 {
        0% {transform:perspective(600px) rotateX(90deg) rotateY(0deg) rotateZ(0deg);}
        100% {transform:perspective(600px) rotateX(450deg) rotateY(0deg) rotateZ(-360deg);}
    }
    @keyframes spin4 {
        0% {transform:perspective(600px)  rotateX(-90deg) rotateY(0deg) rotateZ(0deg);}
        100% {transform:perspective(600px) rotateX(270deg) rotateY(0deg) rotateZ(360deg);}
    }
    @keyframes spin5 {
        0% {transform:perspective(600px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
        100% {transform:perspective(600px) rotateX(360deg) rotateY(360deg) rotateZ(0deg);}
    }
    @keyframes spin6 {
        0% {transform:perspective(600px)  rotateX(0deg) rotateY(180deg) rotateZ(0deg);}
        100% {transform:perspective(600px) rotateX(360deg)  rotateY(540deg) rotateZ(0deg);}
    }