<p>perspective: 150px</p>
<div class="box box1">
  <div class="transform tran1"></div>
</div>

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

<div class="box box3">
  <div class="transform tran3"></div>
</div>

<div>
  
</div>
<p>perspective 설정 안함 </p>
<div class="box box4">
  <div class="transform tran4"></div>
</div>
<div class="box box5">
  <div class="transform tran5"></div>
</div>
<div class="box box6">
  <div class="transform tran6"></div>
</div>

.box{position:relative; width:100px; height:100px; display:inline-block; background: #ccc; border:1px solid #ccc; margin-right:100px;}
.transform{position:absolute;top:0; left:0; width:100%; height:100px; background: #444;}
.box1:hover .tran1{
  transform: perspective(150px) translateX(30px);
}
.box2:hover .tran2{
  transform: perspective(150px) translateY(30px);
}
.box3:hover .tran3{
  transform: perspective(150px) translateZ(30px);
}

.box4:hover .tran4{
  transform: translateX(30px);
}
.box5:hover .tran5{
  transform: translateY(30px);
}
.box6:hover .tran6{
  transform: translateZ(30px);
}