Šī videoklipa laikā CSS-Tricks pogām ir mākslīgs 3D efekts. Tie izskatās kā zils ķieģelis, uz kuru jūs skatāties no augšas leņķī. Nospiežot tos, tiek aktivizēts viņu aktīvais stāvoklis (tāpat kā visas saites / pogas / ievades), un CSS pārvieto tos uz leju un pa labi, parādoties tā, it kā jūs burtiski nedaudz nospiežat ķieģeļu uz leju.
Kāda ir problēma? Pārvietojot šādu elementu (šajā gadījumā pārveidojiet:), translate(3px, 3px);jūs maināt apgabalu, kurā šis nospiedums aktivizēs “click” DOM notikumu. Ja šīs preses atrašanās vieta atrodas apgabalā, kas tagad pārsniedz šo “noklikšķināmo” apgabalu, tas netiks aktivizēts. Tātad poga izskatās nospiesta, bet faktiski nekad netiek nospiesta. Tas ir dīvaini, slikti un negaidīti.
Tomēr efekts joprojām ir foršs, tāpēc šajā videoklipā mēs to labojam, pārvietojot pseido elementu, lai aizpildītu atstāto atstarpi, padarot apgabalu “noklikšķināms” vienmēr vienādu.