Knapparna på CSS-Tricks, vid tidpunkten för denna video, har en falsk 3D-effekt. De ser ut som en blå tegelsten du tittar på uppifrån i en vinkel. När du trycker ner dem aktiveras deras: aktiva tillstånd (som alla länkar / knappar / ingångar) och CSS flyttar dem nedåt och åt höger och verkar som om du bokstavligen trycker tegelstenen ner i ytan lite.
Vad är problemet? När du flyttar ett sådant element (i det här fallet, transform translate(3px, 3px);:) ändrar du det område där trycket kommer att utlösa DOM-händelsen "klicka". Om platsen för den pressen befinner sig i ett område som nu är för stort för det "klickbara" området, kommer det inte att utlösas. Så knappen ser nedtryckt, men blir faktiskt aldrig tryckt. Det är konstigt och dåligt och oväntat beteende.
Effekten är fortfarande cool, så i den här videon fixar vi den genom att flytta ett pseudoelement för att fylla utrymmet kvar, vilket gör det "klickbara" området alltid detsamma.