最近再學(xué)習(xí)CSS3的使用，找了一份CSS3按鈕樣式的代碼，但是里面有一些東西我不太理解，希望能有大佬幫我理解一下，代碼如下：

/* Sweep To Left */


.hvr-sweep-to-left {
  display: inline-block;
  vertical-align: middle;
  transform:  translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  transition-property: color;
  transition-duration: 0.9s;
}


.hvr-sweep-to-left:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #2098D1;
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition-property: transform;
  transition-duration: 0.9s;
  transition-timing-function: ease-out;
}


.hvr-sweep-to-left:hover{
  color: white;
}


.hvr-sweep-to-left:hover:before {
  transform: scaleX(1);
}

這里面為什么把上下左右的距離都調(diào)為了0，還有為什么這里如果不設(shè)置z-index為什么會(huì)覆蓋掉按鈕樣式的文字
另外就石這里的translateZ(0)是做什么的。還有就是transition-origin這個(gè)我不太理解，看了解釋后不知道為什么這里要這么用。

拜托大神們幫我解惑一下