CSS 2D Transforms

एक 2D transform यह reshape करता है कि screen पर किसी element को कैसे draw किया जाता है — move, spun, resized, या tilted — normal document flow में इसकी जगह की space बदले बिना, और HTML को बिल्कुल भी छुए बिना।

In this page:

2D Transform में क्या Count होता है
transform-origin
matrix() Function
Combined Transforms का Order
2D Transforms और Layout

Syntax

css

selector {
  transform: translate(x, y) rotate(angle) scale(factor) skew(angle);
}

2D Transform में क्या Count होता है

एक 2D transform screen के purely flat X/Y plane में operate करता है: यह किसी element को move, rotate, scale, या skew कर सकता है, लेकिन कभी उसे depth नहीं देता। ये सभी functions एक single transform property की values के रूप में pass किए जाते हैं, और कई को एक declaration में combine किया जा सकता है।

Note:

Accepted values:
transform: none — default, कोई transform नहीं
translate(x, y) — move करता है, px या % के साथ
rotate(angle) — deg, turn, या rad
scale(x, y) — number multipliers, 1 unchanged है
skew(x, y) — deg में angles
matrix(a, b, c, d, tx, ty) — combined 2D transform
transform-origin — keywords, lengths, या percentages
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: What Counts as a 2D Transform

css

<style>
.box {
  transform: translateX(20px) rotate(10deg) scale(1.1);
  background: steelblue;
  color: white;
  padding: 10px;
  display: inline-block;
}
</style>
<div class="box">Move, rotate, and scale, all within the flat X/Y plane</div>

transform-origin

transform-origin वह fixed point set करता है जिसके चारों ओर rotation या scale pivot करता है, default रूप से element के exact center (50% 50%) पर। इसे किसी corner या edge में बदलना rotate() को उस point के चारों ओर spin करा देता है, जो hinge-जैसे या corner-anchored animations के लिए बहुत मायने रखता है।

Note:

Accepted values:
center — default, 50% 50%
top left | bottom right — corners के लिए keywords
left | right | top | bottom | center — keyword positions
<length> <length> — top-left से offsets, जैसे 10px 20px
<percentage> — element के size के relative
<z-offset> — 3D के लिए optional तीसरी length value
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: transform-origin

css

<style>
.box {
  transform-origin: top left;
  transform: rotate(30deg);
  background: steelblue;
  color: white;
  padding: 10px;
  display: inline-block;
}
</style>
<div class="box">Pivots around its top-left corner instead of the center</div>

matrix() Function

matrix(a, b, c, d, tx, ty) वह low-level mathematical form है जिस पर हर दूसरा 2D transform function internally compile होता है — scale, skew, और translation को एक matrix में encode करने वाले छह numbers। इसे हाथ से लिखना दुर्लभ है, लेकिन इसे समझना यह explain करता है कि transform functions इस तरह क्यों compose होते हैं।

Note:

Accepted values:
matrix(a, b, c, d, tx, ty) — एक 2D affine transform के लिए छह numbers
matrix(1, 0, 0, 1, 0, 0) — identity, कोई बदलाव नहीं
a और d — x और y पर scale
b और c — skew (और rotation)
tx और ty — px में translation

उदाहरण: The matrix() Function

css

<style>
.box {
  transform: matrix(1, 0, 0, 1, 20, 10);
  background: steelblue;
  color: white;
  padding: 10px;
  display: inline-block;
}
</style>
<div class="box">matrix() equivalent to translate(20px, 10px)</div>

Combined Transforms का Order

जब एक declaration में कई transform functions list किए जाते हैं, तो वे effectively दाएँ-से-बाएँ लागू होते हैं, मतलब आप उन्हें जिस order में लिखते हैं वह visual result बदल देता है — पहले rotate करके फिर translate करना उसी amounts से पहले translate करके फिर rotate करने से अलग result देता है।

Note:

Accepted values:
transform: translate(...) rotate(...) — normal axes के साथ move करता है, फिर जगह पर rotate करता है
transform: rotate(...) translate(...) — पहले rotate करता है, इसलिए move rotated axis को follow करता है
कई functions — result को समझते समय दाएँ से बाएँ पढ़ें
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: Order of Combined Transforms

css

<style>
.a {
  transform: rotate(45deg) translate(50px);
  background: steelblue;
  color: white;
  padding: 10px;
  display: inline-block;
  margin: 30px;
}
.b {
  transform: translate(50px) rotate(45deg);
  background: seagreen;
  color: white;
  padding: 10px;
  display: inline-block;
  margin: 30px;
}
</style>
<div class="a">Rotate then translate</div>
<div class="b">Translate then rotate — a different result</div>

2D Transforms और Layout

क्योंकि transforms layout calculate होने के बाद operate करते हैं, एक transformed element फिर भी page flow में अपनी original, untransformed space reserve करता है — translate() से किसी element को visually move करना उसके पड़ोसी elements को shift नहीं करता, margin या position बदलने के उलट।

Note:

Accepted values:
transform — layout नहीं बदलता; original space फिर भी reserved रहती है
translate — siblings को असर किए बिना visually shift करता है
scale — पड़ोसियों को धकेले बिना visually grow करता है
width / margin — जब layout बदलना चाहिए तो इन्हें इस्तेमाल करें
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: 2D Transforms and Layout

css

<style>
.moved {
  transform: translateX(60px);
  background: steelblue;
  color: white;
  padding: 10px;
  display: inline-block;
}
</style>
<div class="moved">Moved visually</div>
<div style="background: #ddd; padding: 10px; display: inline-block;">Neighbor does not shift — original space still reserved</div>

Live Example

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Transforms Next Lesson → CSS 3D Transforms

CSS 2D Transforms

2D Transform में क्या Count होता है

transform-origin

matrix() Function

Combined Transforms का Order

2D Transforms और Layout

Chapter Quiz — Complete all 22 topics to unlock

Login to run this code