2D ट्रांसफॉर्म्स का उपयोग एलिमेंट स्ट्रक्चर को ट्रांसलेट, रोटेट, स्केल और स्क्यू करने के लिए किया जाता है।
निम्न कुछ 2D ट्रांसफॉर्म फंक्शन्स हैं -
| क्र.सं. | मान और विवरण |
|---|---|
| 1 | matrix(n,n,n,n,n,n) छह मानों के साथ मैट्रिक्स ट्रांसफॉर्म्स परिभाषित करता है |
| 2 | translate(x,y) x-axis और y-axis के साथ एलिमेंट को ट्रांसफॉर्म करता है |
| 3 | translateX(n) x-axis के साथ एलिमेंट को ट्रांसफॉर्म करता है |
| 4 | translateY(n) y-axis के साथ एलिमेंट को ट्रांसफॉर्म करता है |
| 5 | scale(x,y) एलिमेंट की चौड़ाई और ऊंचाई बदलता है |
| 6 | scaleX(n) एलिमेंट की चौड़ाई बदलता है |
CSS3 में 2D ट्रांसफॉर्म फंक्शन्स दिखाने वाला कोड निम्न है -
उदाहरण
<!DOCTYPE html> <html> <head> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } div { width: 100px; height: 100px; background-color: rgb(98, 0, 255); 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</h1> <div class="rotate">ROTATE</div> <div class="skew"> SKEW </div> <div class="scale">SCALE</div> <div class="translate">TRANSLATE</div> </body> </html>आउटपुट
उपरोक्त कोड निम्न आउटपुट उत्पन्न करेगा -
