body{
    margin: 0px;
    padding: 0px;
}

.test {
    background-color: aqua;
    transform: perspective(600) rotateY(45deg);
    height: 100px;
    width: 100px;
}

section.cube{
    width: 250px;
    height: 250px;
    padding: 50px;
    perspective: 1000px;
}

section.cube div{
    transform: translateZ(-125px);
    transform-style: preserve-3d;
    width: 246px;
    height: 246px;
    border: darkred solid 2px;
    transition: transform 0.5s linear;
}

section.cube div.showfront{
    transform: translateZ(-125px);
}

section.cube div.showback{
    transform: translateZ(-125px)
        rotateX(180deg);
}

section.cube div.showright{
    transform: translateZ(-125px)
        rotateY(90deg);
}

section.cube div.showleft{
    transform: translateZ(-125px)
        rotateY(-90deg);
}

section.cube div.showtop{
    transform: translateZ(-125px)
        rotateX(90deg);
}

section.cube div.showbottom{
    transform: translateZ(-125px)
        rotateX(-90deg);
}

section.cube div.dimension{
    transform:
        matrix3d(
        0,0,1,0,
        0,1,0,0,
        -1,0,0,0,
        0,0,0,1
        );
}



section.cube div figure{
    width: 246px;
    height: 246px;
    border: 2px solid black;
    position: absolute;
    margin: 0px;
    opacity: 0.6;
}

section.cube div .front{
    transform: translateZ(125px);
    background-color: #99ffff;
}

section.cube div .back{
    transform: rotateX(180deg)
        translateZ(125px);
    background-color: #6699ff;
}

section.cube div .right{
    transform: rotateY(90deg)
        translateZ(125px);
    background-color: #cc66ff;
}

section.cube div .left{
    transform: rotateY(-90deg)
        translateZ(125px);
    background-color: #ff6699;
}

section.cube div .top{
    transform: rotateX(90deg)
        translateZ(125px);
    background-color: #ff9966;
}

section.cube div .bottom{
    transform: rotateX(-90deg)
        translateZ(125px);
    background-color: #66ff66;
}