<!DOCTYPE HTML>
<style>
  div {
    width:100px;
    height:100px;
    margin:50px;
    background-color:green;  	
  }

  #translatex {
    -webkit-transform: translatex(calc(50% + 10px));
  }
  #translatey {
    -webkit-transform: translatey(calc(40% - 5px));
  }
  #translatez {
    -webkit-transform: perspective(calc(100px * 5)) translatez(calc(10px + 90px));
  }
</style>
<div id="translatex">translate x</div>
<div id="translatey">translate y</div>
<div id="translatez">translate z</div>