<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{padding:0;margin:0}
body{background:#000;}
.container{
height:300px;width:300px; position:relative;
transform:rotateX(-30deg) rotateY(45deg);
border:1px solid red;
margin:100px auto;
transform-style: preserve-3d;
perspective: 1000px;
}
.font{
height:150px;width:150px;background:red;opacity:0.5;
border:1px solid green;font-size:50px;line-height:150px;
text-align:center; position:absolute;margin:75px;
.front{transform:translateZ(75px)}
.back{transform:rotateY(-180deg) translateZ(75px)}
.top{transform:rotateX(90deg) translateZ(75px)}
.bottom{transform:rotateX(-90deg) translateZ(75px)}
.left{transform:rotateY(-90deg) translateZ(75px)}
.right{transform:rotateY(90deg) translateZ(75px)}
</style>
</head>
<body>
<div class="container">
<div class="font front">1</div>
<div class="font back">2</div>
<div class="font left">3</div>
<div class="font right">4</div>
<div class="font top">5</div>
<div class="font bottom">6</div>
</div>
</body>
</html>