<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.l{
width: 250px;
height: 250px;
perspective: 2000px;
}
.m{
position: relative;
margin: 300px 810px;
width: 250px;
height: 250px;
transform-style: preserve-3d;
}
.one{
position: absolute;
width: 250px;
height: 250px;
line-height: 250px;
text-align: center;
border: 1px solid black;
}
.top-1{
background-color: rgba(10,0,500,0.5);
transform:rotateX(90deg) translateZ(125px);
}
.bottom-2{
background-color: rgba(0,300,5,0.5);
transform:rotateX(-90deg) translateZ(125px);
}
.left-3{
background-color: rgba(250,0,0,0.5);
transform: rotateY(-90deg) translateZ(125px);
}
.right-4{
background-color: rgba(222,0,0,0.5);
transform: rotateY(90deg) translateZ(125px);
}
.front-5{
background-color: rgba(0,255,255,0.7);
transform: translateZ(125px);
}
.after-6{
background-color: rgba(0,100,0,0.5);
transform: translateZ(-125px);
}
</style>
</head>
<body>
<div class="l">
<div class="m">
<div class="one top-1">top</div>
<div class="one bottom-2">bottom</div>
<div class="one left-3">left</div>
<div class="one right-4">right</div>
<div class="one front-5">front</div>
<div class="one after-6">after</div>
</div>
</div>
</body>
</html>