transform — ขยับโดยไม่จัดเลย์เอาต์ใหม่หนัก
ทำไมนิยม transform
transform (และมักคู่กับ opacity) มักประมวลผลบนชั้นคอมโพสิต เบากว่าการแอนิเมต width, height, top, margin ที่บังคับให้คำนวณเลย์เอาต์ซ้ำ
.icon:hover {
transform: scale(1.08);
}
.toast.in {
transform: translateY(0);
opacity: 1;
}
.toast {
transform: translateY(0.5rem);
opacity: 0;
transition: transform 200ms ease, opacity 200ms ease;
}
ฟังก์ชันที่ใช้บ่อย
translate · scale · rotate · ผสมหลายค่าใน transform เดียวได้