Try it Live

<!DOCTYPE html>
<html>
  <head>
    <style>
     .normal-area {
      width: 250px;
      padding:20px;
	  margin:15px;
      background-color:#33CBCC;
      text-align:center; 
     }
     .main-container {
      padding:15px 0 0 20px; 
     }	 
     .translate-main {
      width: 200px;
      padding:20px;
	  text-align:center; 
     }
     .pos-x-neg-y {
      background-color: orange;
	  transform: translate(20px,-10px);
	  -ms-transform: translate(20px,-10px); /*IE*/
      -webkit-transform: translate(20px,-10px); /*Safari and Chrome*/
      -moz-transform: translate(20px,-10px); /*mozilla*/	  
     }
     .neg-x-neg-y {
      background-color: pink;
	  transform: translate(-15px,-5px);
	  -ms-transform: translate(-15px,-5px); /*IE*/
      -webkit-transform: translate(-15px,-5px); /*Safari and Chrome*/
      -moz-transform: translate(-15px,-5px); /*mozilla*/	  
     }	 
     .neg-x-pos-y {
      background-color: yellow;
	  transform: translate(-8px,6px);
	  -ms-transform: translate(-8px,6px); /*IE*/
      -webkit-transform: translate(-8px,6px); /*Safari and Chrome*/
      -moz-transform: translate(-8px,6px); /*mozilla*/	  
     }	 	 
     .pos-x-pos-y {
      background-color: #00BB27;
	  transform: translate(25px,30px);
	  -ms-transform: translate(25px,30px); /*IE*/
      -webkit-transform: translate(25px,30px); /*Safari and Chrome*/
      -moz-transform: translate(25px,30px); /*mozilla*/	  
     }	 
    </style>
  </head>
  <body>
    <div class="normal-area">
      Container without translate()
    </div><hr>
    <div class="main-container">
	  <div class="translate-main pos-x-neg-y">
        <strong>translate(20px,-10px)</strong> - <em>Move this div 20px right along x-axis and 10px up along Y-axis</em>
      </div><hr>
      <div class="translate-main neg-x-neg-y">
        <strong>translate(-15px,-5px)</strong> - <em>Move this div 15px left along x-axis and 5px up along Y-axis</em>
      </div><hr>
      <div class="translate-main neg-x-pos-y">
        <strong>translate(-8px,6px)</strong> - <em>Move this div 8px left along x-axis and 6px down along Y-axis</em>
      </div><hr>
      <div class="translate-main pos-x-pos-y">
        <strong>translate(25px,30px)</strong> - <em>Move this div 25px right along x-axis and 30px down along Y-axis</em>
      </div><hr>
	</div>
  </body>
</html>