<div class="box box1">
  <div class="transform"></div>
</div>

<div class="box box2">
  <div class="transform"></div>
</div>

<div class="box box3">
  <div class="transform"></div>
</div>
<div class="box box4">
  <div class="transform"></div>
</div>
<div class="box box5">
  <div class="transform"></div>
</div>
<div class="box box6">
  <div class="transform tran1"></div>
  <div class="transform tran2"></div>
  <div class="transform tran3"></div></div>

<div class="box box6 box7">
  <div class="transform tran1"></div>
  <div class="transform tran2"></div>
  <div class="transform tran3"></div></div>

.box{
  position:relative; 
  width:100px; height:100px; 
  display:inline-block; 
  background: #ccc; 
  border:1px solid #ccc; 
  margin-right:100px;
  perspective-origin:center;
  text-align:center;
}
.transform{
  position:absolute;
  top:0; left:0; 
  width:100px; height:100px;
  background: #444;
}
.box .transform{
  transform: rotateX(45deg);
}
.box1{
}
.box2{
  perspective:100px;
}
.box3{
  perspective:200px;
}
.box4{
  perspective:300px;
}
.box5{
  perspective:500px;
}
.box6{
  width: 500px; height: 150px;
  margin: 20px;
  perspective:100px;
}
.box6 .transform{
  width:100px; 
  position:relative;
  display:inline-block; 
  margin:20px; 
}
.box6.box7{
  perspective:300px;
}