📘 Lesson · Lesson 33

Transforms

What Transform Does

The transform property lets you move, rotate, resize, and skew elements — visually changing them without affecting the layout around them. That last part is key: a transformed element shifts or scales VISUALLY, but the space it originally occupied stays reserved, so nothing else on the page jumps around. This makes transform perfect for hover effects and animations. It's also GPU-accelerated, meaning it's very smooth and fast to animate — which is why (as the transitions chapter hinted) transform is the preferred property for movement effects.

translate — move an element

transform: translateX(20px);    /* move 20px RIGHT */
transform: translateY(-10px);   /* move 10px UP */
transform: translate(20px, -10px);  /* both: right and up */

translate moves an element from its current position — translateX horizontally, translateY vertically, or translate(x, y) for both. Positive X moves right, positive Y moves DOWN (remember: screen Y goes downward). A classic use is a subtle "lift" on hover: transform: translateY(-5px) nudges a card up a few pixels when hovered, making it feel like it's rising toward you. Because translate doesn't disturb layout, this movement is perfectly smooth and won't shift neighbouring elements.

scale — resize an element

transform: scale(1.1);      /* 110% - grows 10% bigger */
transform: scale(0.9);      /* 90% - shrinks a little */
transform: scale(1.5);      /* 150% - much bigger */

Normal

scale(1.15)

scale resizes an element — and it's one of the most satisfying hover effects. scale(1.1) makes an element 10% larger; values below 1 shrink it. The everyday pattern: transform: scale(1.05) on hover (paired with a transition) makes buttons and cards gently grow when you point at them — that subtle "pop" you feel on good websites. Combined with the transition from the last chapter (transition: transform 0.3s), a hover scale is smooth and premium-feeling. It's probably the single most popular transform effect.

rotate and skew

transform: rotate(45deg);     /* rotate 45 degrees clockwise */
transform: rotate(-10deg);    /* 10 degrees counter-clockwise */
transform: skew(10deg);       /* slant/tilt the element */

rotate spins an element by a given angle in degrees — positive is clockwise, negative counter-clockwise. Uses range from tilting a badge slightly for a playful look, to rotating an icon 180° on click (like a dropdown arrow flipping), to full spinning loaders. skew slants an element, creating a tilted, dynamic look — less common but useful for stylish designs. Both are measured in deg (degrees). rotate especially shows up everywhere once you start noticing it — those flipping arrows and spinning loaders are all rotate.

Combining Transforms and transform-origin

/* Apply SEVERAL transforms at once - space-separated: */
transform: translateY(-5px) scale(1.05) rotate(2deg);

/* Change the pivot point with transform-origin: */
.box {
    transform: rotate(45deg);
    transform-origin: top left;   /* rotate around top-left, not center */
}

You can chain multiple transforms in one declaration, space-separated — e.g. lift, grow, AND tilt an element together on hover. Important: when combining, put them all in ONE transform line — writing two separate transform rules makes the second overwrite the first (a common bug). By default, transforms pivot around the element's CENTER, but transform-origin changes that anchor point — top left, bottom right, etc. This matters for rotation especially: rotating around a corner looks very different from rotating around the center. Together, combined transforms and custom origins unlock rich, precise motion.

Exam Corner

Q: What does transform do that's special for layout? It changes an element visually without affecting the surrounding layout (its original space is kept).

Q: How do you make an element grow on hover? transform: scale(1.05); on :hover (with a transition).

Q: What does translateY(-5px) do? Moves the element up by 5 pixels.

Q: How do you apply several transforms at once? List them space-separated in one transform line, e.g. translateY(-5px) scale(1.05).

Q: What does transform-origin control? The pivot/anchor point around which transforms (like rotate) happen.

Transform क्या करता है

transform property आपको elements को हिलाने, घुमाने, आकार बदलने, और skew करने देती है — उन्हें दृश्य रूप से बदलते हुए बिना आस-पास के layout को प्रभावित किए. वह आखिरी हिस्सा अहम है: transformed element दृश्य रूप से shift या scale होता है, पर उसने मूल रूप से जो space घेरा वह आरक्षित रहता है, तो page पर बाकी कुछ नहीं कूदता. यह transform को hover effects और animations के लिए perfect बनाता है. यह GPU-accelerated भी है, मतलब animate करना बहुत smooth और तेज़ है — इसीलिए (जैसा transitions chapter ने इशारा किया) transform movement effects के लिए पसंदीदा property है.

translate - element हिलाना

transform: translateX(20px);    /* 20px DAAYE hilao */
transform: translateY(-10px);   /* 10px UPAR hilao */
transform: translate(20px, -10px);  /* dono: daaye aur upar */

translate element को उसकी वर्तमान स्थिति से हिलाता है — translateX horizontally, translateY vertically, या दोनों के लिए translate(x, y). Positive X right हिलाता है, positive Y NEECHE (याद रखिए: screen Y नीचे की ओर जाता है). Classic इस्तेमाल hover पर subtle "lift" है: transform: translateY(-5px) hover करने पर card को कुछ pixels ऊपर nudge करता है, जिससे लगता है वह आपकी ओर उठ रहा है. क्योंकि translate layout को disturb नहीं करता, यह movement बिल्कुल smooth है और पड़ोसी elements को shift नहीं करेगा.

scale - आकार बदलना

transform: scale(1.1);      /* 110% - 10% बड़ा होता */
transform: scale(0.9);      /* 90% - थोड़ा सिकुड़ता */
transform: scale(1.5);      /* 150% - काफी बड़ा */

Normal

scale(1.15)

scale element का आकार बदलता है — और यह सबसे संतोषजनक hover effects में से एक है. scale(1.1) element को 10% बड़ा बनाता है; 1 से कम values उसे सिकोड़ती हैं. रोज़ का pattern: hover पर transform: scale(1.05) (transition के साथ जोड़कर) buttons और cards को point करने पर कोमलता से बड़ा बनाता है — वही subtle "pop" जो अच्छी websites पर महसूस होता है. पिछले chapter के transition के साथ मिलकर (transition: transform 0.3s), hover scale smooth और premium महसूस होता है. यह शायद सबसे लोकप्रिय transform effect है.

rotate और skew

transform: rotate(45deg);     /* 45 degrees clockwise ghumao */
transform: rotate(-10deg);    /* 10 degrees counter-clockwise */
transform: skew(10deg);       /* element ko tilt/slant karo */

rotate element को दिए गए कोण (degrees में) घुमाता है — positive clockwise, negative counter-clockwise. इस्तेमाल badge को थोड़ा tilt करने (playful look) से, click पर icon को 180° घुमाने (dropdown arrow flip), तक पूरे spinning loaders. skew element को slant करता है, tilted, dynamic look बनाते — कम common पर stylish designs के लिए काम का. दोनों deg (degrees) में मापे जाते हैं. rotate खासकर हर जगह दिखता है जब आप ध्यान देना शुरू करें — वे flipping arrows और spinning loaders सब rotate हैं.

Transforms Combine करना और transform-origin

/* KAI transforms ek saath - space-separated: */
transform: translateY(-5px) scale(1.05) rotate(2deg);

/* transform-origin se pivot point badlo: */
.box {
    transform: rotate(45deg);
    transform-origin: top left;   /* center ke bajaye top-left ke around ghumao */
}

आप एक declaration में कई transforms chain कर सकते हैं, space-separated — जैसे hover पर element को lift, grow, AUR tilt एक साथ. ज़रूरी: combine करते समय उन्हें सब EK transform line में रखिए — दो अलग transform rules लिखना दूसरे को पहले पर overwrite करा देता है (common bug). Default रूप से transforms element के CENTER के around pivot करते हैं, पर transform-origin वह anchor point बदलता है — top left, bottom right, आदि. यह खासकर rotation के लिए मायने रखता है: corner के around घुमाना center के around घुमाने से बहुत अलग दिखता है. साथ में, combined transforms और custom origins समृद्ध, precise motion खोलते हैं.

Exam Corner

Q: Transform layout के लिए खास क्या करता है? यह element को दृश्य रूप से बदलता है बिना आस-पास के layout को प्रभावित किए (उसका मूल space रखा जाता है).

Q: Element को hover पर बड़ा कैसे करते हैं? :hover पर transform: scale(1.05); (transition के साथ).

Q: translateY(-5px) क्या करता है? Element को 5 pixels ऊपर हिलाता है.

Q: कई transforms एक साथ कैसे लगाते हैं? उन्हें एक transform line में space-separated रखिए, जैसे translateY(-5px) scale(1.05).

Q: transform-origin क्या control करता है? वह pivot/anchor point जिसके around transforms (जैसे rotate) होते हैं.

← Back to CSS Tutorial

💻 Live Code Editor

इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.

👁 Live Preview

सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का console.log देखने के लिए F12 दबाइए.