De knoppen op CSS-Tricks, ten tijde van deze video, hebben een nep 3D-effect. Ze zien eruit als een blauwe steen waar je onder een hoek naar kijkt. Wanneer je erop drukt, wordt hun: active status geactiveerd (zoals alle links / knoppen / inputs) en de CSS verplaatst ze naar beneden en naar rechts, het lijkt alsof je de steen letterlijk een beetje in het oppervlak drukt.
Wat is het probleem? Wanneer je een dergelijk element verplaatst (in dit geval transformeren :), verander translate(3px, 3px);je het gebied waarin die druk de "klik" DOM-gebeurtenis zal activeren. Als de locatie van die pers zich in een gebied bevindt dat nu te groot is van dat "klikbare" gebied, wordt deze niet geactiveerd. Dus de knop lijkt ingedrukt, maar wordt nooit echt ingedrukt. Dat is raar en slecht en onverwacht gedrag.
Het effect is echter nog steeds cool, dus in deze video repareren we het door een pseudo-element te verplaatsen om de ruimte die erachter is te vullen, waardoor het "klikbare" gebied altijd hetzelfde blijft.