CSS3 का उपयोग करके तत्वों का 2D परिवर्तन

<घंटा/>

2डी ट्रांस्फ़ॉर्म का उपयोग एलिमेंट स्ट्रक्चर को ट्रांसलेट, रोटेट, स्केल और स्क्यू के रूप में फिर से बदलने के लिए किया जाता है।

कुछ 2D ट्रांसफ़ॉर्म फ़ंक्शन निम्नलिखित हैं -

<टेबल> <थहेड> क्रमांक मूल्य और विवरण 1 <टीडी>मैट्रिक्स(एन,एन,एन,एन,एन,एन)
छह मानों के साथ मैट्रिक्स रूपांतरण को परिभाषित करने के लिए प्रयुक्त होता है
2 अनुवाद करें(x,y)
एक्स-अक्ष और वाई-अक्ष के साथ तत्व को बदलने के लिए प्रयुक्त होता है
3 अनुवादX(n)
एक्स-अक्ष के साथ तत्व को बदलने के लिए प्रयुक्त होता है
4 अनुवादY(n)
तत्व को y-अक्ष के साथ बदलने के लिए प्रयुक्त होता है
5 <टीडी>स्केल(एक्स,वाई)
तत्व की चौड़ाई और ऊंचाई को बदलने के लिए उपयोग किया जाता है
6 <टीडी>स्केलएक्स(एन)
तत्व की चौड़ाई बदलने के लिए प्रयुक्त

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>

आउटपुट

CSS3 का उपयोग करके तत्वों का 2D परिवर्तन