Transformations: Scale, Rotate, Translate In Hindi
सीएसएस ट्रांसफॉर्मेशन आपको किसी भी एचटीएमएल वेबसाइट में वेबपेज ऑब्जेक्ट एलिमेंट को मल्टीप्ल टाइप्स से मॉडिफाई और मेन्युप्लेट करने में हेल्प करता है. जहा आप वेबसाइट एलिमेंट ऑब्जेक्ट को मैन्युअल रूप से स्केल करना, एलिमेंट ऑब्जेक्ट को रोटेट करना और एलिमेंट ऑब्जेक्ट ट्रांसलेशन फीचर्स शामिल है। जिसमे आपके सिंपल वेबपेज ऑब्जेक्ट एलिमेंट में ट्रांसफॉर्मेशन यूजर इंटरफ़ेस डिज़ाइन में एडवांस्ड इफ़ेक्ट और ऐट्रिब्यूट्स को ऐड कर वेब विजिटर यूजर एक्सपेरिएंस को बेहतर करते हैं।
So, let’s understand CSS transformation features in HTML webpage.
Basic CSS Transformation Properties.
यहाँ आपको एचटीएमएल वेबसाइट में वेबपेज सीएसएस ट्रांसफॉर्मेशन ऐट्रिब्यूट्स के लिए आपको कुछ सीएसएस ट्रांसलेशन प्रॉपर्टीज डिफ़ॉल्ट मिलते हैं.
CSS Transformation Properties.
- CSS Transform – मौजूदा एचटीएमएल वेबपेज में सीएसएस ट्रांसफॉर्मेशन प्रॉपर्टीज किसी भी पर्टिकुलर वेबपेज एलिमेंट में 2-डायमेंशनल और 3-डायमेंशनल ट्रांसफॉर्मेशन ऐट्रिब्यूट्स को अप्लाई करने में हेल्प करता है।
- CSS Transform-Origin – मौजूदा एचटीएमएल वेबपेज में सीएसएस ट्रांसफॉर्मेशन प्रॉपर्टीज एलिमेंट ऑब्जेक्ट के लिए ओरिजिन पॉइंट को डिसाइड करता है।
Types of Transformation in CSS.
Css Scale Transformation.
मौजूदा एचटीएमएल वेबपेज में सीएसएस स्केल ट्रांसफॉर्मेशन किसी वेबपेज एलिमेंट ऑब्जेक्ट के डिफ़ॉल्ट शेप को रिप्लेस करता है। जहा आप सीएसएस स्केल ऑब्जेक्ट के X और Y एक्सिस एंगल के लिए स्केलिंग ऑब्जेक्ट को डिसाइड करते हैं।
Css Scale Transformation syntax.
transform: scale(sx, sy);
Css Scale Transformation Example.
.scale-transformation {
transform: scale(1.2, 1.2); /* it used to scale sx or sy object at 1.2 scale */
}
Css Rotate Transformation.
मौजूदा एचटीएमएल वेबपेज में सीएसएस रोटेट ट्रांसफॉर्मेशन किसी वेबसाइट ऑब्जेक्ट एलिमेंट को एक पर्टिकुलर पॉइंट के आल अराउंड रोटेट या मूव करता है।
Css Rotate Transformation syntax.
transform: rotate(angle);
Css Rotate Transformation Example.
.rotate- transformation {
transform: rotate(50deg); /* it used to Rotates the element 50 degrees angle */
}
Css Translate Transformation.
मौजूदा एचटीएमएल वेबपेज में सीएसएस ट्रांसलेट ट्रांसफॉर्मेशन किसी ऑब्जेक्ट और एलिमेंट को उसकी एक्सएक्ट पोजीशन से मूव करता है।
Css Translate Transformation Syntax.
transform: translate(tx, ty);
Css Translate Transformation Example.
.translate- transformation {
transform: translate(40px, 90px); /* it used to Moves the element 40px right and 90px down order */
}
Combining Transforms in CSS.
आप अपने मौजूदा एचटीएमएल वेबपेज में सीएसएस ऑब्जेक्ट एलिमेंट में एम्प्टी स्पेस से उन्हें सेपरेट करके कंबाइंड ट्रांसफॉर्मेशन प्रॉपर्टीज में मल्टीप्ल सीएसएस ट्रांसफॉर्मेशन प्रॉपर्टीज को ग्रुप कर डिस्प्ले कर सकते है।
Combining Transforms CSS Example.
.combined- transformation {
transform: scale(1.4) rotate(40deg) translate(70px, 110px);
}
Transform Origin in CSS.
आप अपने मौजूदा एचटीएमएल वेबपेज में सीएसएस ऑब्जेक्ट एलिमेंट में ट्रांसफ़ॉर्म-ओरिजिन प्रॉपर्टी से आप उस ट्रांसफॉर्मेशन पिवट पॉइंट को रिप्लेस कर सकते है. जहा पहले सीएसएस ट्रांसफॉर्मेशन ऐट्रिब्यूट्स को अप्लाई किया गया हो।
Transform Origin CSS syntax.
transform-origin: x-axis y-axis;
Transform Origin CSS Example.
.transform-origin- transformation {
transform-origin: top left; /* it used to Sets the origin object to the top-left corner order */
transform: rotate(70deg); /* it used to Rotates around the top-left corner object */
}
Example of css scale, rotate, and translate transformations in HTML webpage.
यहाँ आपको एचटीएमएल वेबपेज में सीएसएस स्केल, रोटेट और ट्रांसलेट ट्रांसफॉर्मेशन ऐट्रिब्यूट्स को डिस्प्ले करने वाला एक एक्साम्प्ल दिया गया है।
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let Tray CSS Transformations Properties Example</title>
<style>
body {
display: flex;
font-family:monotype corsiva;
justify-content: space-around;
font-size: 1.1em;
font-weight: bold;
align-items: center;
height: 120vh;
background-color: white;
margin: 4;
padding:4;
}
.box-element {
width: 110px;
height: 110px;
background-color: red;
color: white;
display: flex;
justify-content: center;
align-items: center;
border-radius: 20px;
transition: transform 0.9s ease; /* it displays Smooth transformation */
}
.scale-css-transformation {
background-color: orange;
color:black;
transform: scale(1.2); /* it used to scale css element */
}
.rotate-css-transformation {
background-color: teal;
color:white;
transform: rotate(34deg); /* it used to rotate css element */
}
.translate-css-transformation {
background-color: aqua;
color:black;
transform: translate(40px, 40px); /* it use to move css element */
}
.combined-css-transformation {
background-color: blue;
color:white;
transform: scale(1.4) rotate(40deg) translate(30px, 30px); /* it use to Combined multiple css transformations properties */
}
</style>
</head>
<body>
<div class=”box-element scale-css-transformation”><center>Scale Transformation Preview</center></div>
<div class=”box-element rotate-css-transformation”><center>Rotate Transformation Preview</center></div>
<div class=”box-element translate-css-transformation”><center>Translate Transformation Preview</center></div>
<div class=”box-element combined-css-transformation”><center>Combined Transformation Preview</center></div>
</body>
</html>
Css File for Transformation.
body {
display: flex;
font-family:monotype corsiva;
justify-content: space-around;
font-size: 1.1em;
font-weight: bold;
align-items: center;
height: 120vh;
background-color: white;
margin: 4;
padding:4;
}
.box-element {
width: 110px;
height: 110px;
background-color: red;
color: white;
display: flex;
justify-content: center;
align-items: center;
border-radius: 20px;
transition: transform 0.9s ease; /* it displays Smooth transformation */
}
.scale-css-transformation {
background-color: orange;
color:black;
transform: scale(1.2); /* it used to scale css element */
}
.rotate-css-transformation {
background-color: teal;
color:white;
transform: rotate(34deg); /* it used to rotate css element */
}
.translate-css-transformation {
background-color: aqua;
color:black;
transform: translate(40px, 40px); /* it use to move css element */
}
.combined-css-transformation {
background-color: blue;
color:white;
transform: scale(1.4) rotate(40deg) translate(30px, 30px); /* it use to Combined multiple css transformations properties */
}
Using Transform Properties on Hover in CSS.
आप अपने मौजूदा एचटीएमएल वेबपेज में सीएसएस ऑब्जेक्ट एलिमेंट होवर ऐट्रिब्यूट्स में ट्रांसफ़ॉर्मेशन इफ़ेक्ट अप्लाई कर इंटरैक्टिव वेबपेज एलिमेंट ऑब्जेक्ट को डेवलप कर सकते हैं।
Hover transformation properties example.
.box:hover-transformation {
transform: scale(1.3) rotate(20deg); /* it used to Scale 1.3 and rotate 20degree on hover action */
}
Applying CSS Transformation Attributes to HTML Webpage Conclusion.
किसी भी एचटीएमएल वेबपेज में सीएसएस ट्रांसफ़ॉर्मेशन ऐट्रिब्यूट्स आपके वेबपेज डिज़ाइन को ग्रो करने, वेबपेज डीप वेब विजिटर एक्सपेरिएंस और वेबसाइट यूजर इंटरफ़ेस इंटरक्टिविटी प्रोवाइड करने के लिए एक पावरफुल टूल्स है। जहा आप अपनी वेब डेवलपमेंट जरूरत के अनुसार स्केल ऐट्रिब्यूट्स, रोटेट ऐट्रिब्यूट्स और ट्रांसफ़ॉर्मेशन प्रॉपर्टीज को इफेक्टिव आर्डर में उपयोग करके, आप एक डायनामिक और कमर्शियल यूजर इंटरफ़ेस वेब विजिटर के लिए डेवलप कर सकते हैं।
