CSS

translate in 3d css

/* extra z axis in 2d only x and y axis so to work we need persective to work with
3d */
body{
perspective:1000px; /* image will be 1000px-300px=700px away from our eye*/
perspective:500px;  /*image will be more bigger because 500-300=200px 
  image is 200px away from our eye */
perspective:200px;/*it will pass our eye */
}
/*persective is distance between viewer and screen */
img:hover{
transform:translateZ(300px); /*image is moving toward us for z= 300px*/
transform:translateZ(-300px); /* image moving far from us. so small image*/
transform:translateZ(300px);
}