2D ट्रांसफॉर्म फंक्शन्स का उपयोग 2D ट्रांसफॉर्मेशन लागू करने के लिए किया जाता है जो किसी एलिमेंट पर रोटेट, मूव, स्केल और स्क्यू हो सकते हैं।
Translate − एलिमेंट को x और y axis के साथ मूव करने के लिए।
Scale − x y दिशा में एलिमेंट को रिसाइज़ करने के लिए।
Rotate − एलिमेंट को कुछ डिग्री घुमाने के लिए।
Skew − x y दिशा में एलिमेंट को स्लैंट करने के लिए।
CSS में 2D ट्रांसफॉर्म फंक्शन्स दिखाने वाला कोड निम्न है -
उदाहरण
<!DOCTYPE html> <html> <head> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } div { width: 100px; height: 100px; background-color: rgb(255, 0, 128); border:2px solid rgb(0, 35, 150); margin: 20px; display: inline-block; color: white; } .rotate { transform: rotate(20deg); } .translate { transform: translate(30px, 20px); } .scale { transform: scale(2, 1); margin-left:70px; } .skew { transform: skew(20deg); } </style> </head> <body> <h1>2D transform functions example</h1> <div class="rotate">ROTATE()</div> <div class="skew">SKEW()</div> <div class="scale">SCALE()</div> <div class="translate">TRANSLATE()</div> </body> </html>आउटपुट
उपरोक्त कोड निम्न आउटपुट उत्पन्न करेगा -
