Knappene på CSS-Tricks, på tidspunktet for denne videoen, har en falsk 3D-effekt. De ser ut som en blå murstein du ser på ovenfra i en vinkel. Når du trykker ned på dem, blir deres: aktive tilstand utløst (som alle lenker / knapper / innganger), og CSS flytter dem ned og til høyre, og ser ut som om du bokstavelig talt trykker mursteinen litt ned i overflaten.
Hva er problemet? Når du flytter et sånt element (i dette tilfellet, transformerer translate(3px, 3px);), endrer du området der trykket vil utløse "klikk" DOM-hendelsen. Hvis plasseringen av den pressen tilfeldigvis er i et område som nå er overdimensjonert av det "klikkbare" området, vil det ikke utløses. Så knappen ser presset ut, men blir faktisk aldri trykket på. Det er underlig og dårlig og uventet oppførsel.
Effekten er fremdeles kul, så i denne videoen fikser vi den ved å flytte et pseudo-element for å fylle den plassen som er igjen, slik at det "klikkbare" området alltid blir det samme.