CSS transform प्रॉपर्टी तत्व पर 2D या 3D ट्रांसफॉर्मेशन लागू करने के लिए उपयोग की जाती है। यह तत्व के आकार, स्थिति, और अभिविन्यास को बदले बिना उसके विजुअल प्रस्तुति को बदलती है।
उदाहरण
नीचे दिए गए उदाहरण में, transform: rotate(10deg) का उपयोग करके <div> तत्व को घुमाया गया है।
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: gray;
transform: rotate(10deg);
}
</style>
</head>
<body>
<h1>Rotation</h1>
<div>Demo</div>
</body>
</html>
transform के सामान्य उपयोग:
- होवर प्रभावों के लिए इंटरैक्टिव UI
- एनिमेशन में तत्वों को घुमाना, स्केल करना, मूव करना
- रेस्पॉन्सिव डिजाइन में तत्वों को पुनर्व्यवस्थित करना
- 3D प्रभाव और पैरेलैक्स के लिए
नोट: ट्रांसफॉर्म किया गया तत्व अपने स्वयं के स्टैकिंग कॉन्टेक्स्ट बनाता है और position: fixed वाले बच्चों के लिए कंटेनिंग ब्लॉक के रूप में कार्य करता है।
