recently I studied the use of CSS3, and found a code of CSS3 button style, but there are some things I don"t quite understand. I hope I can have a boss to help me understand it. The code is as follows:
/* 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: -sharp2098D1;
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);
} Why is the distance between the top and bottom set to 0, and why does it overwrite the button-style text if z-index is not set here?
in addition, what does the translateZ (0) here do? And I don"t quite understand transition-origin. After reading the explanation, I don"t know why it is used in this way.
Please help me understand