<div id="cont">
<div id="main">
<div id="sss">
<div id="f1">1</div>
<div id="f2">2</div>
<div id="f3">3</div>
<div id="f4">4</div>
<div id="f5">5</div>
<div id="f6">6</div>
</div>
</div>

<div id="tab">
<table style="margin:50px;">
<tr><td><button onclick="turn(1);">1</button><td><button onclick="turn(2);">2</button><td><button onclick="turn(3);">3</button><td><button onclick="turn(4);">4</button><td><button onclick="turn(5);">5</button><td><button onclick="turn(6);">6</button> 
</table>
</div>
</div>

body{
margin:0px;
}
#cont{
width:100%;
height:100%;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
}
#main{
width:100px;
height:100px;
perspective:500px;
trasnform-style:preserve-3d;
}
#main div{
position:absolute;
height:100px;
width:100px;
line-height:100px;
text-align:center;
}
#sss{
width:100px;
height:100px;
transform-style:preserve-3d;
transition:transform 1s;
}
#f1{
background-color:rgba(43,255,143,0.5);
transform:translateZ(50px);
}
#f2{
background-color:rgba(143,255,43,0.5);
transform:translateX(50px) rotateY(90deg);
}
#f3{
background-color:rgba(143,20,43,0.5);
transform:translateY(50px) rotateX(-90deg);
}
#f4{
background-color:rgba(255,20,43,0.5);
transform:translateX(-50px) rotateY(-90deg);
}
#f5{
background-color:rgba(87,138,222,0.5);
transform:translateZ(-50px) rotateY(180deg);
}
#f6{
background-color:rgba(222,87,167,0.5);
transform:translateY(-50px) rotateX(90deg);
}
td{
text-align:center;
padding:5px;
}

function turn(m){
var c=document.getElementById("sss");
if(m==1){
c.style.transform="rotateX(0deg) rotateY(0deg) rotateZ(0deg)";
}

if(m==2){
c.style.transform="rotateX(0deg) rotateY(-90deg) rotateZ(0deg)";
}

if(m==3){
c.style.transform="rotateX(90deg) rotateY(0deg) rotateZ(0deg)";
}

if(m==4){
c.style.transform="rotateX(0deg) rotateY(90deg) rotateZ(0deg)";
}

if(m==5){
c.style.transform="rotateX(0deg) rotateY(-180deg) rotateZ(0deg)";
}

if(m==6){
c.style.transform="rotateX(-90deg) rotateY(0deg) rotateZ(0deg)";
}
}