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(255, 17, 0); border:2px solid black; 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 transformation of elements </h1> <div class="rotate">ROTATE</div> <div class="skew">SKEW</div> <div class="scale">SCALE</div> <div class="translate">TRANSLATE</div> </body> </html>आउटपुट
