<div id = 'obox'>
<div class = 'front'></div>
<div class = 'back'></div>
<div class = 'left' ></div>
<div class ='right'></div>
<div class = 'top'></div>
<div class = 'bottom></div>
</div>
*{
margin:0;
padding:0;
list-style:none;
}
#obox{
width:200px;
height:200px;
position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
transform:perspective(800px) rotateY(-60deg) rotateX(-30deg);
transform-style:preserve-3d;
transition:5s all ease;
}
#obox div{
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
border:1px solid #000000;
text-align:center;
line-height:200px;
font-size:50px;
color:#ffffff;
opacity:0.5;
}
#obox div.front{
background:red;
transform:translateZ(100px)
}
#obox div.back{
background:plum;
transform:translateZ(-100px)
}
#obox div.left{
background:blue;
transform:translateX(-100px) rotateY(90deg)
}
#obox div.right{
background:hotpink;
transform:translateX(100px) rotateY(-90deg)
}
#obox div.top{
background:pink;
transform:translateY(100px) rotateX(-90deg)
}
#obox div.bottom{
background:peru;
transform:translateY(-100px) rotateX(90deg)
}
body:active #obox{
transform:rotateX(600deg) rotate(600deg);
}
