Transitions & Animations
Transforms
translate, rotate, scale
💡 Transform ek element ko physically move/rotate/resize karta hai — jaise ek photo ko haath mein pakadke ghumaना, bada/chhota karna, ya slide karna, bina uski actual "jagah" (layout position) change kiye document flow mein.
translate(x, y) — element ko move karta hai (position: relative jaisa, lekin layout-independent). rotate(deg) — ghumaता hai. scale(n) — bada/chhota karta hai. skew(deg) — tirchha karta hai. Multiple transforms combine kar sakte ho space-separated.
.move-right {
transform: translateX(50px); /* 50px right shift */
}
.rotate {
transform: rotate(45deg);
}
.grow-on-hover:hover {
transform: scale(1.1); /* 10% bada */
}
.combined {
transform: translateX(20px) rotate(10deg) scale(1.05);
/* Multiple transforms ek saath */
}🔄
Transform ek element ko physically move/rotate/resize karta hai — jaise ek photo ko haath mein pakadke ghumaना, bada/chhota karna, ya slide karna, bina uski actual "jagah" (layout position) change kiye document flow mein.
1 / 2
⚡ Quick Recap
- translate/rotate/scale/skew = position/size/angle change
- Layout-independent — doosre elements affected nahi hote
- position se better performance (GPU-accelerated compositing)
Is page mein (2 subtopics)
transform-origin decide karta hai KAHA se rotation/scale "center" hoga — default center hai, lekin corner ya kisi bhi custom point se bhi rotate/scale kar sakte ho.
.rotate-from-corner {
transform-origin: top left; /* top-left corner se rotate hoga, center se nahi */
transform: rotate(45deg);
}
.scale-from-bottom {
transform-origin: bottom center;
transform: scale(1.5); /* bottom se upar ki taraf grow karega */
}Tip: transform-origin especially useful hai jab natural "hinge point" chahiye ho — jaise ek door jo apne hinge (edge) se khulta hai, center se nahi.
CSS 3D transforms bhi support karta hai — rotateX/rotateY (3D rotation, X/Y axis ke around), perspective (3D depth ka "camera distance" simulate karta hai). Card-flip effects, 3D carousels ke liye use hote hain.
.flip-card {
perspective: 1000px;
}
.flip-card-inner {
transition: transform 0.6s;
transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg); /* card "flip" ho jaata hai, jaise real card */
}Tip: 3D transforms complex ho sakte hain (perspective, transform-style, backface-visibility sab coordinate karne padte hain) — simple 2D transforms (translate/scale/rotate) zyadatar use-cases ke liye kaafi hain.