top: 0;bottom:0;left:0;right:0;的使用和一些其他的问题

Question

最近再学习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);
}

这里面为什么把上下左右的距离都调为了0，还有为什么这里如果不设置z-index为什么会覆盖掉按钮样式的文字
另外就石这里的translateZ(0)是做什么的。还有就是transition-origin这个我不太理解，看了解释后不知道为什么这里要这么用。

拜托大神们帮我解惑一下

Answer 1

》这里面为什么把上下左右的距离都调为了0
绝对定位下就是把元素的宽高都设为100%

》如果不设置z-index为什么会覆盖掉按钮样式的文字
z-index 是控制Z顺的，决定同一父元素下的子元素的前后顺序，越小越靠后

》translateZ(0)是做什么的
平移变换

》还有就是transition-origin这个我不太理解
变换的原点，这里是 “100% 50%;”， 就是指以元素右边缘的中点为变换的原点

Answer 2

使用chrome或者firefox，打开F12 ,把带有数字的属性，全部改改，看下效果。然后再用百度，或者必应或者谷歌，搜索你关注的属性，看下文档。