Šio vaizdo įrašo metu CSS-Tricks mygtukai turi dirbtinį 3D efektą. Jie atrodo kaip mėlyna plyta, į kurią žiūrite iš viršaus kampu. Kai paspausite juos žemyn, suveikia jų: aktyvi būsena (kaip ir visos nuorodos / mygtukai / įėjimai), o CSS juda jas žemyn ir į dešinę, pasirodydama taip, tarsi tiesiogine to žodžio prasme šiek tiek spaustumėte plytą.
Kokia problema? Perkeldami tokį elementą (šiuo atveju transformuokite translate(3px, 3px);:) keičiate sritį, kurioje tas paspaudimas sukels „click“ DOM įvykį. Jei to paspaudimo vieta yra toje srityje, kuri dabar yra didesnė už tą „spustelėjamą“ sritį, ji nesuveikia. Taigi mygtukas atrodo paspaustas, bet iš tikrųjų niekada nespaudžiamas. Tai keistas, blogas ir netikėtas elgesys.
Vis dėlto efektas vis dar yra kietas, todėl šiame vaizdo įraše mes jį pataisome perkeldami pseudo elementą, kad užpildytumėte paliktą erdvę, o „spustelėjama“ sritis visada būtų tokia pati.
