← Back to CSS Course | Chapter 8: Animations & Effects | Lesson 5 of 22

CSS Transforms

एक flat postcard पकड़ने की कल्पना करें। आप postcard को अपनी desk पर slide कर सकते हैं (translate), उसे किसी clock hand की तरह घुमा सकते हैं (rotate), उसे अपनी आँखों के करीब zoom करके बड़ा दिखा सकते हैं (scale), या उसके corners को sideways twist कर सकते हैं (skew)। CSS transform properties वही coordinate adjustments हैं। ये आपको अपने elements को dynamically shift, rotate, scale, और skew करने देते हैं, यह बदलते हुए कि वे page पर कैसे display होते हैं, आस-पास के elements को असर किए बिना।

In this page:

  1. translate से Elements को Shift करना
  2. rotate से Elements को Spin करना
  3. scale से Elements को Resize करना
  4. skew से Elements को Twist करना
  5. कई Transforms को Combine करना
Syntax
css 
selector {
  transform: function(value);  /* translate(), rotate(), scale(), skew() */
}

translate से Elements को Shift करना

translate() method किसी element को उसकी normal position से horizontal X-axis और vertical Y-axis के साथ move करता है, margins इस्तेमाल करने के मुकाबले layouts को offset करने का एक lightweight और high-performance तरीका बनकर।

Note:
  • smooth, hardware-accelerated animations बनाने के लिए absolute margins के बजाय transform: translate() इस्तेमाल करें।
  • Accepted values:
  • translate(x, y) — element को move करता है
  • rotate(angle) — deg, turn, या rad में angle
  • scale(x, y) — number multipliers
  • skew(x, y) — angle distortion
  • matrix() — सभी 2D transforms एक function में
  • none — कोई transform नहीं
Warning: Translated elements normal page flow को असर नहीं करते, इसलिए वे आस-पास के elements के साथ overlap हो सकते हैं।

उदाहरण: Shifting Elements with translate

css 
<style>
.box {
  transform: translate(20px, 10px);
  background: steelblue;
  color: white;
  padding: 10px;
  display: inline-block;
}
</style>
<div class="box">Shifted right and down</div>

rotate से Elements को Spin करना

rotate() method किसी element को उसके center point के चारों ओर specified degrees (deg) या turns से clockwise या counter-clockwise घुमाता है।

Note:
  • clockwise घुमाने के लिए positive degrees इस्तेमाल करें, और counter-clockwise के लिए negative degrees।
  • Accepted values:
  • rotate(<angle>) — 2D rotation, positive होने पर clockwise
  • rotate(45deg) — degrees
  • rotate(0.25turn) — turns, rad और grad भी
  • rotateX() | rotateY() | rotateZ() — axis rotations
  • transform-origin — pivot point set करता है
Warning: Text containers को rotate करना कुछ screens पर characters को blurry या jagged दिखा सकता है।

उदाहरण: Spinning Elements with rotate

css 
<style>
.box {
  transform: rotate(45deg);
  background: steelblue;
  color: white;
  padding: 10px;
  display: inline-block;
}
</style>
<div class="box">Rotated 45 degrees clockwise</div>

scale से Elements को Resize करना

scale() method किसी element की display size बढ़ाता या घटाता है। यह multiplier values accept करता है (जैसे 150% तक scale up करने के लिए 1.5, या 50% तक scale down करने के लिए 0.5)।

Note:
  • अपने pages पर elegant card zoom transitions बनाने के लिए hover states के अंदर scale transforms इस्तेमाल करें।
  • Accepted values:
  • scale(<number>) — uniform scale, 1 unchanged है
  • scale(x, y) — अलग horizontal और vertical factors
  • scaleX(<number>) | scaleY(<number>) — सिर्फ एक axis
  • scale(-1) — एक negative number element को mirror करता है
Warning: Raster images को scale up करना उन्हें blurry और pixelated दिखा सकता है; इसके बजाय scalable vector SVGs इस्तेमाल करें।

उदाहरण: Resizing Elements with scale

css 
<style>
.box {
  transform: scale(1.5);
}
</style>
<div class="box">Scaled up to 150%</div>

skew से Elements को Twist करना

skew() method किसी element को X-axis या Y-axis के साथ एक specified angle से tilt करता है। यह एक slanted, parallelogram-जैसा effect बनाता है, जो dynamic background shapes और designs बनाने के लिए उपयोगी है।

Note:
  • sleek, angled layout divider shapes बनाने के लिए skew transforms को hidden overflow containers के साथ जोड़ें।
  • Accepted values:
  • skew(<angle>) — X axis के साथ skew करता है
  • skew(x, y) — X और Y angles
  • skewX(<angle>) — सिर्फ horizontal skew
  • skewY(<angle>) — सिर्फ vertical skew
Warning: container cards को skew करना उनके अंदर के सभी text को भी skew कर देगा, जो पढ़ना मुश्किल बना सकता है।

उदाहरण: Twisting Elements with skew

css 
<style>
.box {
  transform: skew(20deg, 0deg);
  background: steelblue;
  color: white;
  padding: 10px;
  display: inline-block;
}
</style>
<div class="box">Slanted along the X-axis</div>

कई Transforms को Combine करना

आप transform property के अंदर उन्हें एक space-separated list में लिखकर एक ही element पर कई transform methods लागू कर सकते हैं, translation, rotation, और scaling को smoothly combine करते हुए।

Note:
  • अपने transform methods को एक single, space-separated list में लिखें; transform property को कई बार declare न करें।
  • Accepted values:
  • transform: A B C — space-separated list, visually दाएँ से बाएँ लागू होती है
  • none — कोई transform नहीं (default)
  • translate() rotate() scale() — सबसे common combination
  • matrix() — एक single combined 2D matrix
  • inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning: कई अलग transform declarations लिखना बाद वाले rules को पहले वालों को पूरी तरह overwrite करा देगा।

उदाहरण: Combining Multiple Transforms

css 
<style>
.box {
  transform: translate(10px, 10px) rotate(15deg) scale(1.1);
  background: steelblue;
  color: white;
  padding: 10px;
  display: inline-block;
}
</style>
<div class="box">Translated, rotated, and scaled together</div>
Live Example
Related Topics

CSS Blend Modes · CSS Filters · CSS Shadows · CSS Transitions

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
आम गलतियां
  1. किसी element पर कई अलग transform properties लिखना, जिससे बाद वाले rules पहले वालों को overwrite कर देते हैं।
  2. यह realize किए बिना elements को rotate या scale करने की कोशिश करना कि वे आस-पास के page layouts को असर नहीं करते।
  3. extreme skew angles लागू करना जो text containers को readability limits से आगे tilt कर देते हैं।
चैप्टर सारांश
  • transform property आस-पास के layouts को असर किए बिना elements पर structural shifts, rotations, scaling, और skews लागू करती है।
  • elements को offset करने के लिए translate(), उन्हें spin करने के लिए rotate(), उन्हें resize करने के लिए scale(), और उन्हें tilt करने के लिए skew() इस्तेमाल करें।
  • elements को smoothly animate करने के लिए एक single, space-separated list में कई transform methods combine करें।
ब्राउज़र सपोर्ट

Standard 2D CSS transforms हर modern web browser द्वारा natively supported हैं।

🔒

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Blend Modes Next Lesson → CSS 2D Transforms

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.