why is this dude using backface visibility when it does’t have any relevance ?

hey guys , was just trying to make a simple CSS hover effect using psedo element , went through some dudes code online and its smthing like [URL=”http://jsfiddle.net/1mqnpvje/”]this [/URL]

why is he using

[CODE]backface-visibility[/CODE]

and

[CODE]transform: translateZ(0);[/CODE]

??

any idea ??

the css code for the button is below:

[CODE]
.hvr-underline-from-center {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
overflow: hidden;
}
.hvr-underline-from-center:before {
content:””;
position: absolute;
z-index: -1;
left: 50%;
right: 50%;
bottom: 0;
background: #2098d1;
height: 4px;
-webkit-transition-property: left, right;
transition-property: left, right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-underline-from-center:hover:before, .hvr-underline-from-center:focus:before, .hvr-underline-from-center:active:before {
left: 0;
right: 0;
}
[class^=”hvr-“] {
margin: 0.4em;
padding: 1em;
font-size: 1em;
text-transform: uppercase;
cursor: pointer;
background: none repeat scroll 0% 0% #E1E1E1;
text-decoration: none;
color: #666;
outline: none;
border:none;
}
[/CODE]

Also in #CSS _↴