img.bg 图片样式设置的疑问？

left: 50%;

z-index:1;

-webkit-transform: translateX(-50%);

-moz-transform: translateX(-50%);

-o-transform: translateX(-50%);

-ms-transform: translateX(-50%);

这部分代码，我在chrome 中运行.  position 距离左边50%，再位移到左边50%，不知道这段代码的深层次含义是什么。有没有大神在解答下？ 而且left:50%了 动画效果就不是100%了，而是右侧一半的距离。任务7没看明白什么意思