CSS3 - 2d ट्रांसफ़ॉर्म
2 डी ट्रांसफॉर्म का उपयोग तत्व संरचना को अनुवाद, घुमाव, स्केल और तिरछा के रूप में फिर से बदलने के लिए किया जाता है।
निम्न तालिका में सामान्य मान समाहित हैं जो 2D ट्रांसफ़ॉर्म में उपयोग किए जाते हैं -
| अनु क्रमांक। | मूल्य और विवरण |
|---|---|
| 1 | matrix(n,n,n,n,n,n) मैट्रिक्स को छह मूल्यों के साथ रूपांतरित करने के लिए प्रयुक्त किया जाता है |
| 2 | translate(x,y) तत्व को x- अक्ष और y- अक्ष के साथ परिवर्तित करने के लिए उपयोग किया जाता है |
| 3 | translateX(n) एक्स-अक्ष के साथ तत्व को रूपांतरित करने के लिए उपयोग किया जाता है |
| 4 | translateY(n) Y- अक्ष के साथ तत्व को रूपांतरित करने के लिए उपयोग किया जाता है |
| 5 | scale(x,y) तत्व की चौड़ाई और ऊंचाई को बदलने के लिए उपयोग किया जाता है |
| 6 | scaleX(n) तत्व की चौड़ाई को बदलने के लिए उपयोग किया जाता है |
| 7 | scaleY(n) तत्व की ऊंचाई को बदलने के लिए उपयोग किया जाता है |
| 8 | rotate(angle) कोण पर आधारित तत्व को घुमाने के लिए उपयोग किया जाता है |
| 9 | skewX(angle) एक्स अक्ष के साथ तिरछा परिवर्तनों को परिभाषित करता था |
| 10 | skewY(angle) Y अक्ष के साथ तिरछा परिवर्तन को परिभाषित करता है |
निम्नलिखित उदाहरणों को उपरोक्त सभी गुणों का नमूना दिखाया गया है।
20 डिग्री घुमाएँ
20 डिग्री के कोण के साथ बॉक्स रोटेशन जैसा कि नीचे दिखाया गया है -
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv {
/* IE 9 */
-ms-transform: rotate(20deg);
/* Safari */
-webkit-transform: rotate(20deg);
/* Standard syntax */
transform: rotate(20deg);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "myDiv">
Tutorials point.com
</div>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
-20 डिग्री घुमाएँ
नीचे दिखाए गए अनुसार -20 डिग्री के कोण के साथ बॉक्स रोटेशन -
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv {
/* IE 9 */
-ms-transform: rotate(-20deg);
/* Safari */
-webkit-transform: rotate(-20deg);
/* Standard syntax */
transform: rotate(-20deg);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "myDiv">
Tutorials point.com
</div>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
तिरछी एक्स अक्ष
नीचे दिखाए गए अनुसार तिरछा x- अक्ष के साथ बॉक्स रोटेशन -
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#skewDiv {
/* IE 9 */
-ms-transform: skewX(20deg);
/* Safari */
-webkit-transform: skewX(20deg);
/* Standard syntax */
transform: skewX(20deg);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "skewDiv">
Tutorials point.com
</div>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
तिरछा Y अक्ष
नीचे दिखाए गए अनुसार तिरछा y- अक्ष के साथ बॉक्स रोटेशन -
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#skewDiv {
/* IE 9 */
-ms-transform: skewY(20deg);
/* Safari */
-webkit-transform: skewY(20deg);
/* Standard syntax */
transform: skewY(20deg);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "skewDiv">
Tutorials point.com
</div>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
मैट्रिक्स परिवर्तन
मैट्रिक्स के साथ बॉक्स रोटेशन नीचे दिखाए अनुसार बदल जाता है -
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv1 {
/* IE 9 */
-ms-transform: matrix(1, -0.3, 0, 1, 0, 0);
/* Safari */
-webkit-transform: matrix(1, -0.3, 0, 1, 0, 0);
/* Standard syntax */
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "myDiv1">
Tutorials point.com
</div>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
मैट्रिक्स दूसरी दिशा में बदल जाती है।
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv2 {
/* IE 9 */
-ms-transform: matrix(1, 0, 0.5, 1, 150, 0);
/* Safari */
-webkit-transform: matrix(1, 0, 0.5, 1, 150, 0);
/* Standard syntax */
transform: matrix(1, 0, 0.5, 1, 150, 0);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "myDiv2">
Tutorials point.com
</div>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -