CSS 3D Transforms

2D से 3D तक: rotateX/Y/Z

rotateX() और rotateY() किसी element को उसके horizontal या vertical axis के चारों ओर tilt करते हैं, उसे viewer से दूर या उसकी तरफ़ fold होते हुए दिखाते हैं, जबकि rotateZ() बिल्कुल familiar 2D rotate() जैसा behave करता है। depth effect को असल में render करने के लिए तीनों को parent पर एक perspective establish करना चाहिए।

उदाहरण: From 2D to 3D: rotateX/Y/Z

<style>
.scene {
  perspective: 400px;
  background: #eee;
  padding: 30px;
}
.box {
  transform: rotateY(45deg);
  background: steelblue;
  color: white;
  padding: 20px;
  display: inline-block;
}
</style>
<div class="scene">
  <div class="box">Tilted away from the viewer</div>
</div>

perspective Property

perspective यह set करता है कि viewer की आँख screen से कितनी दूर है: एक छोटी value (जैसे 200px) एक dramatic, exaggerated 3D effect बनाती है, जबकि एक बड़ी value (जैसे 1500px) एक subtle effect बनाती है। parent पर perspective set न होने पर, 3D rotations ऐसे render होते हैं जैसे उन्हें infinitely दूर से देखा जा रहा हो और flat दिखते हैं।

perspective-origin vanishing point को element के center से हटाकर shift करता है, यह बदलते हुए कि 3D scene का कौन-सा side सबसे तेज़ recede होता दिखता है।

उदाहरण: The perspective Property

<style>
.dramatic {
  perspective: 200px;
  background: #eee;
  padding: 30px;
  display: inline-block;
}
.subtle {
  perspective: 1500px;
  background: #eee;
  padding: 30px;
  display: inline-block;
}
.box {
  transform: rotateY(45deg);
  background: steelblue;
  color: white;
  padding: 20px;
}
</style>
<div class="dramatic"><div class="box">Dramatic depth</div></div>
<div class="subtle"><div class="box">Subtle depth</div></div>

translate3d और translateZ

translate3d(x, y, z) किसी element को एक साथ तीन dimensions में move करता है, जहाँ एक positive z value इसे viewer की तरफ़ धकेलती है और एक negative value इसे दूर धकेलती है — perspective के साथ combined, यह element के apparent size को बदलता है, बिल्कुल असली depth की तरह।

उदाहरण: translate3d and translateZ

<style>
.scene {
  perspective: 500px;
}
.box {
  transform: translate3d(0, 0, 100px);
}
</style>
<div class="scene">
  <div class="box">Pushed toward the viewer, appears larger</div>
</div>

transform-style: preserve-3d

Default रूप से, एक 3D-transformed element अपने children को अपने ही 2D plane में flatten कर देता है। इसके बजाय parent पर transform-style: preserve-3d set करना children को उनकी अपनी independent 3D positions और rotations रखने देता है, जो किसी rotating cube जैसे layered 3D scenes बनाने के लिए ज़रूरी है।

backface-visibility: hidden किसी element को 90 degrees से आगे rotate होकर viewer से दूर मुँह करने पर पूरी तरह hide कर देता है, जो एक convincing flip-card effect बनाने के लिए ज़रूरी है जहाँ आप mirrored backside text को through दिखते नहीं देखना चाहते।

उदाहरण: transform-style: preserve-3d

<style>
.cube {
  transform-style: preserve-3d;
}
.face {
  backface-visibility: hidden;
}
</style>
<div class="cube">
  <div class="face">Front face</div>
  <div class="face">Back face, hidden once rotated away</div>
</div>

2D बनाम 3D Transforms

2D transforms के उलट, जो किसी element को सिर्फ flat page plane में reposition करते हैं, 3D transforms को असल में सिर्फ अलग-शेप वाली flat shadow के बजाय depth की तरह दिखने के लिए एक perspective context और extra Z-axis functions (rotateX/Y, translateZ, matrix3d) चाहिए होते हैं।

उदाहरण: 2D vs 3D Transforms

<style>
.flat {
  transform: rotate(45deg);
}
.scene {
  perspective: 400px;
}
.depth {
  transform: rotateY(45deg);
}
</style>
<div class="flat">2D: stays flat</div>
<div class="scene"><div class="depth">3D: appears to have depth</div></div>