Tombol-tombol pada CSS-Tricks, pada saat video ini dibuat, memiliki efek 3D palsu. Mereka tampak seperti batu bata biru yang Anda lihat dari atas pada suatu sudut. Saat Anda menekannya, status aktifnya dipicu (seperti semua tautan / tombol / input) dan CSS memindahkannya ke bawah dan ke kanan, tampak seolah-olah Anda benar-benar menekan bata ke permukaan sedikit.
Apa masalahnya? Saat Anda memindahkan elemen seperti itu (dalam hal ini, transformasi:) translate(3px, 3px);Anda mengubah area di mana pers tersebut akan memicu peristiwa DOM “klik”. Jika lokasi pers itu kebetulan berada di area yang sekarang ukurannya lebih besar dari area "yang dapat diklik", itu tidak akan memicu. Jadi tombolnya terlihat ditekan, tetapi tidak pernah benar-benar ditekan. Itu adalah perilaku yang aneh dan buruk dan tidak terduga.
Efeknya masih keren, jadi dalam video ini kami memperbaikinya dengan memindahkan elemen semu untuk mengisi ruang yang tertinggal, membuat area "yang dapat diklik" selalu sama.