2D ट्रांसफ़ॉर्म फ़ंक्शन का उपयोग 2D ट्रांसफ़ॉर्मेशन को लागू करने के लिए किया जाता है जिसे किसी तत्व में घुमाया जा सकता है, स्थानांतरित किया जा सकता है, स्केल किया जा सकता है और तिरछा किया जा सकता है।
-
अनुवाद करें - किसी तत्व को x और y अक्ष पर ले जाने के लिए।
-
पैमाना - x y दिशा में तत्व का आकार बदलने के लिए।
-
घुमाएं - तत्व को कुछ हद तक इधर-उधर घुमाने के लिए।
-
तिरछा - किसी तत्व को 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> आउटपुट
उपरोक्त कोड निम्न आउटपुट उत्पन्न करेगा -
