1

Yesterday I used a snippet of from hover.css. I know CSS well enough to understand what is going on here, except one line, which is transform: perspective(1px) translateZ(0);. I've tried to feed the exact values to this demo on MDN, however, it gave me a crazy result. (I suspect that this is some kind of render sub-optimization (such as transform: scale(0.99), which I slightly remember to have seen before), but I might be wrong. Or a stacking context?). Can anybody explain? Thanks.

.hvr-underline-reveal {
    display: inline-block;
    vertical-align: middle;
    transform: perspective(1px) translateZ(0); /* <-- what is going on here? */
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    overflow: hidden;
}    

.hvr-underline-reveal:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    bottom: 0;
    background: #2098D1;
    height: 4px;
    transform: translateY(4px);
    transition: transform 0.3s ease-out;
}

.hvr-underline-reveal:hover:before {
  transform: translateY(0);
}
<div class="hvr-underline-reveal">You'll see a thick underline if you hover me</div>
<p>But do I really need perspective and Z axis transition? What is it good for?</p>
HynekS
  • 2,738
  • 1
  • 19
  • 34

1 Answers1

1

A "useless" transformation in the Z-plane is often used to fix blurry rendering that occurs when translating or transitioning something or for some other reason force the browser to use hardware accelleration / the gpu.

for instance see here CSS transition effect makes image blurry / moves image 1px, in Chrome?

Matsemann
  • 21,083
  • 19
  • 56
  • 89
  • Thanks. So the `perspective` part does not matter? Is it the 'useless' part? – HynekS Sep 29 '19 at 07:43
  • @HynekS the whole part is 'useless' as it shouldnt really change the result of the rendering, but is only added to force the browser to render it in a different pipeline. – Matsemann Sep 29 '19 at 08:27