फिल्टर इफेक्ट्स से संबंधित CSS गुण

Articles

यह लेख फिल्टर इफेक्ट्स से संबंधित CSS गुणों को समझाता है।

आप उपयोग और filter और transform जैसे गुणों को लिखने के तरीके के बारे में जान सकते हैं।

YouTube Video

प्रीव्यू के लिए HTML

css-effect.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-effect.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Animation</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Filter/Effect Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>filter</h3>
 23            <section>
 24                <header><h4>Original Image</h4></header>
 25                <section class="sample-view">
 26                    <img src="example.jpg" alt="Example Image" width="100">
 27                </section>
 28                <header><h4>filter: sepia(1)</h4></header>
 29                <section class="sample-view">
 30                    <img src="example.jpg" alt="Example Sepia Image" class="filtered-image-sepia" width="100">
 31                </section>
 32                <header><h4>filter: opacity(0.5)</h4></header>
 33                <section class="sample-view">
 34                    <img src="example.jpg" alt="Example Opacity Image" class="filtered-image-opacity" width="100">
 35                </section>
 36                <header><h4>filter: brightness(1.2) contrast(1.5) sepia(0.5)</h4></header>
 37                <section class="sample-view">
 38                    <img src="example.jpg" alt="Example Filtered Image" class="filtered-image-multiple" width="100">
 39                </section>
 40            </section>
 41        </article>
 42        <article>
 43            <h3>filter-function</h3>
 44            <section>
 45                <header><h4>filter: blur(5px)</h4></header>
 46                <section class="sample-view">
 47                    <img src="example.jpg" alt="Example Blur Image" style="filter: blur(5px);" width="100">
 48                </section>
 49                <header><h4>filter: brightness(1.5)</h4></header>
 50                <section class="sample-view">
 51                    <img src="example.jpg" alt="Example Brightness Image" style="filter: brightness(1.5);" width="100">
 52                </section>
 53                <header><h4>filter: contrast(2)</h4></header>
 54                <section class="sample-view">
 55                    <img src="example.jpg" alt="Example Contrast Image" style="filter: contrast(2);" width="100">
 56                </section>
 57                <header><h4>filter: grayscale(1)</h4></header>
 58                <section class="sample-view">
 59                    <img src="example.jpg" alt="Example Grayscale Image" style="filter: grayscale(1);" width="100">
 60                </section>
 61                <header><h4>filter: hue-rotate(90deg)</h4></header>
 62                <section class="sample-view">
 63                    <img src="example.jpg" alt="Example Hue Rotate Image" style="filter: hue-rotate(90deg);" width="100">
 64                </section>
 65                <header><h4>filter: invert(1)</h4></header>
 66                <section class="sample-view">
 67                    <img src="example.jpg" alt="Example Invert Image" style="filter: invert(1);" width="100">
 68                </section>
 69                <header><h4>filter: opacity(0.5)</h4></header>
 70                <section class="sample-view">
 71                    <img src="example.jpg" alt="Example Opacity Image" style="filter: opacity(0.5);" width="100">
 72                </section>
 73                <header><h4>filter: saturate(2)</h4></header>
 74                <section class="sample-view">
 75                    <img src="example.jpg" alt="Example Saturate Image" style="filter: saturate(2);" width="100">
 76                </section>
 77                <header><h4>filter: sepia(1)</h4></header>
 78                <section class="sample-view">
 79                    <img src="example.jpg" alt="Example Sepia Image" style="filter: sepia(1);" width="100">
 80                </section>
 81                <header><h4>filter: brightness(1.2) contrast(1.5) sepia(0.5)</h4></header>
 82                <section class="sample-view">
 83                    <img src="example.jpg" alt="Example Filtered Image" style="filter: brightness(1.2) contrast(1.5) sepia(0.5);" width="100">
 84                </section>
 85            </section>
 86        </article>
 87        <article>
 88            <h3>transform</h3>
 89            <section>
 90                <header><h4>Transform: scale(1.5, 2)</h4></header>
 91                <section class="sample-view">
 92                    <div class="transform-box transform-scale">Scale</div>
 93                </section>
 94                <header><h4>Transform: skew(30deg, 20deg)</h4></header>
 95                <section class="sample-view">
 96                    <div class="transform-box transform-skew">Skew</div>
 97                </section>
 98                <header><h4>Transform: rotate(45deg) scale(1.5)</h4></header>
 99                <section class="sample-view">
100                    <div class="transform-box transform-rotate">Rotate Scale</div>
101                </section>
102            </section>
103        </article>
104        <article>
105            <h3>transform functions</h3>
106            <section>
107                <header><h4>Transform: translate(100px, 50px)</h4></header>
108                <section class="sample-view">
109                    <div class="transform-box transform-translate">Translate</div>
110                </section>
111                <header><h4>Transform: rotate(45deg)</h4></header>
112                <section class="sample-view">
113                    <div class="transform-box transform-rotate">Rotate</div>
114                </section>
115                <header><h4>Transform: scale(1.5, 2)</h4></header>
116                <section class="sample-view">
117                    <div class="transform-box transform-scale">Scale</div>
118                </section>
119                <header><h4>Transform: skew(30deg, 20deg)</h4></header>
120                <section class="sample-view">
121                    <div class="transform-box transform-skew">Skew</div>
122                </section>
123                <header><h4>Transform: matrix(1, 0.5, -0.5, 1, 100, 0)</h4></header>
124                <section class="sample-view">
125                    <div class="transform-box transform-matrix">Matrix</div>
126                </section>
127                <header><h4>Transform: translate3d(50px, 50px, 50px)</h4></header>
128                <section class="sample-view perspective">
129                    <div class="transform-box transform-translate3d">Translate3D</div>
130                </section>
131                <header><h4>Transform: rotate3d(1, 1, 0, 45deg)</h4></header>
132                <section class="sample-view perspective">
133                    <div class="transform-box transform-rotate3d">Rotate3D</div>
134                </section>
135                <header><h4>Transform: rotate(45deg) scale(1.5)</h4></header>
136                <section class="sample-view">
137                    <div class="transform-box transform-rotate-scale">Rotate Scale</div>
138                </section>
139            </section>
140        </article>
141        <article>
142            <h3>transform-origin</h3>
143            <section>
144                <header><h4>transform-origin: left top</h4></header>
145                <section class="sample-view">
146                    <div class="transform-box transform-origin">Transform<br>(left-top)</div>
147                </section>
148                <header><h4>transform-origin: right bottom</h4></header>
149                <section class="sample-view">
150                    <div class="transform-box transform-origin-right-bottom">Transform<br>(right-bottom)</div>
151                </section>
152                <header><h4>transform-origin: 0% 100%</h4></header>
153                <section class="sample-view">
154                    <div class="transform-box transform-origin-percent">Transform<br>(percent)</div>
155                </section>
156            </section>
157        </article>
158    </main>
159</body>
160</html>

फ़िल्टर प्रभाव

`filter` गुण

 1.filtered-image-sepia {
 2    filter: sepia(1);
 3}
 4
 5.filtered-image-opacity {
 6    filter: opacity(0.5);
 7}
 8
 9.filtered-image-multiple {
10    filter: brightness(1.2) contrast(1.5) sepia(0.5);
11}

filter गुण का उपयोग तत्वों में दृश्य इफेक्ट्स देने के लिए किया जाता है। आप आसानी से छवियों या तत्वों को धुंधला करना, ब्राइटनेस को समायोजित करना, और कंट्रास्ट को बदलना जैसे विभिन्न इफेक्ट्स जोड़ सकते हैं।

filtered-image-sepia क्लास में सेपिया इफेक्ट लागू किया गया है।
filtered-image-opacity क्लास परOpacity इफेक्ट लागू किया गया है।
filtered-image-multiple क्लास में छवि पर ब्राइटनेस, कंट्रास्ट, और सेपिया इफेक्ट्स लागू किए गए हैं।

मूल वाक्यविन्यास

1filter: none | <filter-function> [<filter-function>]*;

filter गुण के लिए, none या एक filter-function निर्दिष्ट करें।

none निर्दिष्ट करने पर कोई भी फिल्टर इफेक्ट लागू नहीं होता है।
जिस फिल्टर फंक्शन को लागू करना है उसे <filter-function> में निर्दिष्ट करें। एकाधिक फिल्टरों को अंतराल से अलग कर निर्दिष्ट किया जा सकता है।

फिल्टर फंक्शन के प्रकार

`blur()`

1filter: blur(5px);

blur() फंक्शन धुंधलापन प्रभाव लागू करता है।

मूल्य को पिक्सेल (px) में निर्दिष्ट किया जाता है और मूल्य जितना बड़ा होगा, धुंधलापन उतना ही अधिक होगा।

`brightness()`

1filter: brightness(1.5);

brightness() फंक्शन ब्राइटनेस को समायोजित करता है।

मूल्य को 0 (पूरी तरह अंधेरा) से 1 (मूल ब्राइटनेस) के आधार पर निर्दिष्ट किया जाता है। 1 से अधिक का मूल्य निर्दिष्ट करने पर तत्व अधिक चमकीला हो जाता है।

`contrast()`

1filter: contrast(2);

contrast() फंक्शन कंट्रास्ट को समायोजित करता है।

मूल्य को 0 (ग्रेस्केल) से 1 (मूल कंट्रास्ट) के आधार पर निर्दिष्ट किया जाता है, और 1 से अधिक मूल्य कंट्रास्ट को बढ़ाता है।

`grayscale()`

1filter: grayscale(1);

grayscale() फंक्शन तत्व को मोनोक्रोम में परिवर्तित करता है।

0 (मूल रंग) से 1 (पूरी तरह से मोनोक्रोम) तक मान निर्दिष्ट किया गया है।

`hue-rotate()`

1filter: hue-rotate(90deg);

hue-rotate() फ़ंक्शन ह्यू को घुमाता है।

मान डिग्री (deg) में निर्दिष्ट किए जाते हैं, ह्यू को घुमाकर रंग में परिवर्तन लागू करते हुए। ह्यू 0deg से 360deg की सीमा में घूमता है।

`invert()`

1filter: invert(1);

invert() फ़ंक्शन रंगों को उलट देता है।

मान 0 (मूल रंग) से 1 (पूरी तरह से उलटा) तक निर्दिष्ट किए जाते हैं।

`opacity()`

1filter: opacity(0.5);

opacity() फ़ंक्शन किसी तत्व की पारदर्शिता को बदलता है।

मान 0 (पूरी तरह से पारदर्शी) से 1 (अपारदर्शी) की सीमा में निर्दिष्ट किए जाते हैं।

`saturate()`

1filter: saturate(2);

saturate() फ़ंक्शन सेचुरेशन को समायोजित करता है।

मान 0 (मोनोक्रोम) से 1 (मूल संतृप्ति) तक होते हैं, और 1 से अधिक मान निर्दिष्ट करने पर संतृप्ति बढ़ती है।

`sepia()`

1filter: sepia(1);

sepia() फ़ंक्शन सेपिया टोन में परिवर्तित करता है।

मान 0 (मूल रंग) से 1 (पूर्ण सेपिया टोन) तक निर्दिष्ट किए जाते हैं।

एकाधिक फ़िल्टर लागू करना।

1filter: brightness(1.2) contrast(1.5) sepia(0.5);

कई फ़िल्टर स्पेस द्वारा अलग करके लागू किए जा सकते हैं।

`filter` प्रॉपर्टी का उपयोग करने के फायदे।

filter प्रॉपर्टी को आसानी से नेत्रहीन आकर्षक तत्व बनाने के लिए एक शक्तिशाली उपकरण है। इसके निम्नलिखित फायदे हैं:।

दृश्य प्रभावों को आसानी से जोड़ा जा सकता है।
बिना कोई इमेज एडिटिंग सॉफ़्टवेयर का उपयोग किए, केवल CSS के साथ छवियों को समायोजित किया जा सकता है।
एनिमेशनों के साथ मिलाकर डायनेमिक प्रभाव बनाए जा सकते हैं।

`transform` प्रॉपर्टी।

 1.transform-box {
 2    width: 100px;
 3    height: 100px;
 4    background-color: skyblue;
 5    transition: transform 0.3s ease;
 6}
 7
 8.transform-scale:hover {
 9    /* Width 1.5 times and height 2 times */
10    transform: scale(1.5, 2);
11}
12
13.transform-skew:hover {
14    /* Skew 30 degrees on the X-axis and 20 degrees on the Y-axis */
15    transform: skew(30deg, 20deg);
16}
17
18.transform-rotate:hover {
19    transform: rotate(45deg) scale(1.5);
20}

transform प्रॉपर्टी का उपयोग तत्वों पर 2D या 3D परिवर्तन लागू करने के लिए किया जाता है। स्थिति, घुमाव, स्केलिंग (बड़ा/छोटा करना), और तिरछापन जैसे विभिन्न दृश्य परिवर्तन CSS के साथ निर्दिष्ट किए जा सकते हैं। transform प्रॉपर्टी का आमतौर पर एनिमेशनों के साथ उपयोग किया जाता है और यह डायनेमिक UI तत्व बनाने में मदद करता है।

transform-scale क्लास में, तत्व पर होवर करने से उसकी चौड़ाई 1.5 गुना और ऊंचाई 2 गुना बढ़ जाती है।
transform-skew क्लास में, तत्व पर होवर करने से वह X-अक्ष पर 30 डिग्री और Y-अक्ष पर 20 डिग्री घुमाया जाता है।
transform-rotate क्लास में, तत्व पर होवर करने से वह 45 डिग्री घुमाया जाता है और उसका आकार 1.5 गुना बढ़ जाता है।

मूल वाक्यविन्यास

1transform: none | <transform-function> [<transform-function>]*;

transform प्रॉपर्टी या तो none या एक transform-function निर्दिष्ट करती है।

यदि none निर्दिष्ट है, तो कोई परिवर्तन लागू नहीं किया जाएगा।
<transform-function> के साथ परिवर्तन के प्रकार को निर्दिष्ट करें। अनेक परिवर्तन स्पेस द्वारा अलग करके लागू किए जा सकते हैं।

मुख्य परिवर्तन कार्य

`translate()`

1/* Move 50px to the right and 100px down */
2transform: translate(50px, 100px);
3
4transform: translateX(50px); /* Move 50px to the right */
5transform: translateY(100px); /* Move 100px down */

translate(x, y) फ़ंक्शन तत्व को X और Y अक्षों के साथ निर्दिष्ट दूरी तक खिसकाता है। x और y को px या % जैसे यूनिट्स का उपयोग करके निर्दिष्ट करें। आप इसे अलग-अलग translateX() या translateY() के साथ भी निर्दिष्ट कर सकते हैं।

`rotate()`

1transform: rotate(45deg); /* Rotate 45 degrees */

rotate(angle) फ़ंक्शन तत्व को निर्दिष्ट कोण (डिग्री में) घुमाता है।

`scale()`

1/* Width 1.5 times and height 2 times */
2transform: scale(1.5, 2);
3
4transform: scaleX(1.5); /* Width 1.5 times */
5transform: scaleY(2); /* Height 2 times */

scale(x, y) फ़ंक्शन तत्व को X और Y अक्षों के साथ स्केल करता है। x और y मूल आकार के सापेक्ष स्केल फैक्टर्स हैं। उदाहरण के लिए, scale(2, 2) आकार को दोगुना कर देगा। आप इसे अलग-अलग scaleX() या scaleY() के साथ भी निर्दिष्ट कर सकते हैं।

`skew()`

1/* Skew 30 degrees on the X-axis and
2   20 degrees on the Y-axis */
3transform: skew(30deg, 20deg);
4
5/* Skew 30 degrees on the X-axis */
6transform: skewX(30deg);
7
8/* Skew 20 degrees on the Y-axis */
9transform: skewY(20deg);

skew(x-angle, y-angle) फ़ंक्शन तत्व को X और Y अक्षों के साथ निर्दिष्ट कोणों से झुकाता है। आप इसे अलग-अलग skewX() या skewY() के साथ भी निर्दिष्ट कर सकते हैं।

`matrix()`

1/* Apply a special transformation */
2transform: matrix(1, 0.5, -0.5, 1, 0, 0);

matrix() फ़ंक्शन एक साथ अनेक परिवर्तनों को जोड़ने के लिए एक मैट्रिक्स निर्दिष्ट करता है। इसे आम तौर पर अन्य परिवर्तन फ़ंक्शनों के साथ संयोजन में उपयोग किया जाता है।

3D परिवर्तन फ़ंक्शन्स

`translate3d()`

1/* Moves the element 100px to the right (X-axis),
250px down (Y-axis), and 30px towards the viewer (Z-axis) */
3transform: translate3d(100px, 50px, 30px);
4
5/* Allows child elements to preserve their 3D position relative to the parent */
6transform-style: preserve-3d;
7
8/* Applies a perspective from a distance of 600px to give a sense of depth */
9perspective: 600px;

translate3d() फ़ंक्शन 3D अंतरिक्ष में अनुवाद करता है।
- इसे तीन आयामों में निर्दिष्ट किया जा सकता है: X, Y, और Z अक्ष।
transform-style प्रॉपर्टी को preserve-3d और perspective प्रॉपर्टी को 600px पर सेट करने से, चाइल्ड एलिमेंट्स पर गहराई के साथ तीन-आयामी मूवमेंट इफेक्ट लागू होता है।

`rotate3d()`

1/* Rotate 45 degrees around the X and Y axes */
2transform: rotate3d(1, 1, 0, 45deg);
3
4transform-style: preserve-3d;
5perspective: 600px;

rotate3d() फ़ंक्शन 3D अंतरिक्ष में घुमाव करता है।
- यह तत्व को X, Y, और Z अक्षों के संदर्भ में घुमाता है।

कई रूपांतरणों को संयोजित करना

1transform: rotate(45deg) scale(1.5);

transform प्रॉपर्टी एक साथ कई रूपांतरण लागू कर सकती है। उदाहरण के लिए, आप घुमाव और आकार परिवर्तन को संयोजित कर सकते हैं।

उपयोग के लिए मुख्य बिंदु

transform प्रॉपर्टी CSS में तत्वों को दृश्य रूप से बदलने के लिए एक शक्तिशाली उपकरण है। विभिन्न फ़ंक्शन्स को संयोजित करके, आप इंटरैक्टिव और गतिशील यूआई बना सकते हैं।

transform प्रॉपर्टी तत्वों को सीधे बदलने की अनुमति देती है, जिससे DOM लेआउट को बदले बिना दृश्य संशोधन संभव होता है।
यह एनीमेशन और इंटरैक्टिव तत्व बनाने के लिए बहुत उपयोगी है, और transition या animation के साथ संयोजित करके गतिशील डिज़ाइन सक्षम करता है।

`transform-origin` प्रॉपर्टी

 1.transform-box {
 2    background-color: skyblue;
 3}
 4
 5.transform-origin-left-top:hover {
 6    /* Based on the top left corner */
 7    transform-origin: left top;
 8    transform: rotate(45deg) scale(1.2);
 9}
10
11.transform-origin-right-bottom:hover {
12    /* Based on the right bottom corner */
13    transform-origin: right bottom;
14    transform: rotate(45deg) scale(1.2);
15}
16
17.transform-origin-percent:hover {
18    /* Transform based on the bottom left corner */
19    transform-origin: 0% 100%;
20    transform: rotate(45deg) scale(1.2);
21}

transform-origin प्रॉपर्टी का उपयोग transform प्रॉपर्टी द्वारा लागू रूपांतरणों के लिए मूल बिंदु सेट करने के लिए किया जाता है। आप तत्व रूपांतरणों के लिए संदर्भ बिंदु निर्दिष्ट कर सकते हैं, जिससे आप नियंत्रित कर सकते हैं कि रोटेशन या स्केलिंग जैसे प्रभाव किस स्थिति के चारों ओर लागू हों।

इस उदाहरण में, जब आप तत्व पर माउस को घुमाते हैं, तो यह transform-origin प्रॉपर्टी द्वारा निर्दिष्ट बिंदु के आधार पर एक साथ घूमता और आकार बदलता है।

मूल वाक्यविन्यास

1transform-origin: x y z;

transform-origin प्रॉपर्टी के लिए, आप x, y, और z को इस तरह निर्दिष्ट करते हैं।

x के लिए, X-अक्ष (क्षैतिज दिशा) पर संदर्भ बिंदु निर्दिष्ट करें। मान कीवर्ड (left, center, right) या लंबाई (px, % आदि) का उपयोग करके निर्दिष्ट किए जा सकते हैं।
y के लिए, Y-अक्ष (ऊर्ध्व दिशा) पर संदर्भ बिंदु निर्दिष्ट करें। मान कीवर्ड (top, center, bottom) या लंबाई का उपयोग करके निर्दिष्ट किए जा सकते हैं।
z के लिए, Z-अक्ष (गहराई दिशा) पर संदर्भ बिंदु निर्दिष्ट करें। यह केवल 3D रूपांतरणों के साथ उपयोग किया जा सकता है। यह वैकल्पिक है, और डिफ़ॉल्ट मान 0 है।

डिफ़ॉल्ट मान

1transform-origin: 50% 50%; /* Center of the element */

transform-origin प्रॉपर्टी के लिए डिफ़ॉल्ट मान तत्व के केंद्र को X और Y दोनों अक्षों के लिए संदर्भ बिंदु के रूप में रखता है। इसका अर्थ है कि डिफ़ॉल्ट रूप से, रूपांतरण तत्व के केंद्र को संदर्भ बिंदु के रूप में उपयोग करते हुए किए जाते हैं।

मान निर्दिष्ट करने का तरीका

transform-origin प्रॉपर्टी के लिए मान कीवर्ड, प्रतिशत, लंबाई जैसे px, em, आदि का उपयोग करके निर्दिष्ट किए जा सकते हैं।

कीवर्ड विशिष्टता
- left: तत्व के बाएँ किनारे को X-अक्ष संदर्भ के रूप में सेट करता है।
- right: तत्व के दाएँ किनारे को X-अक्ष संदर्भ के रूप में सेट करता है।
- top: तत्व के ऊपर के किनारे को Y-अक्ष संदर्भ के रूप में सेट करता है।
- bottom: तत्व के नीचे के किनारे को Y-अक्ष संदर्भ के रूप में सेट करता है।
- center: तत्व के केंद्र को X या Y अक्ष संदर्भ के रूप में सेट करता है।
प्रतिशत निर्धारण
- 0%: इसे बाएँ या ऊपर के किनारे पर सेट करता है।
- 50%: इसे केंद्र पर सेट करता है।
- 100%: इसे दाएँ या नीचे के किनारे पर सेट करता है।
लंबाई निर्धारण
- आप px, em, आदि जैसी विशिष्ट लंबाई का उपयोग करके संदर्भ बिंदु को सटीक रूप से समायोजित कर सकते हैं।

3D ट्रांसफॉर्मेशन में `transform-origin`

1.box {
2    width: 100px;
3    height: 100px;
4    background-color: lightblue;
5    transform-origin: 50% 50% 50px; /* Specify the Z-axis as well */
6    transform: rotateY(45deg);
7}

transform-origin को 3D ट्रांसफॉर्मेशन के लिए भी उपयोग किया जा सकता है। 3D ट्रांसफॉर्मेशन में, आप Z-अक्ष पर संदर्भ बिंदु भी निर्दिष्ट कर सकते हैं। उदाहरण के लिए, गहराई दिशा में घूर्णन के केंद्र को निर्दिष्ट करके, गहराई की भावना वाले ट्रांसफॉर्मेशन संभव हैं।

आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।

YouTube Video

पारदर्शिता से संबंधित CSS गुण

फिल्टर इफेक्ट्स से संबंधित CSS गुण

YouTube Video

प्रीव्यू के लिए HTML

फ़िल्टर प्रभाव

filter गुण

मूल वाक्यविन्यास

फिल्टर फंक्शन के प्रकार

blur()

brightness()

contrast()

grayscale()

hue-rotate()

invert()

opacity()

saturate()

sepia()

एकाधिक फ़िल्टर लागू करना।

filter प्रॉपर्टी का उपयोग करने के फायदे।

transform प्रॉपर्टी।

मूल वाक्यविन्यास

मुख्य परिवर्तन कार्य

translate()

rotate()

scale()

skew()

matrix()

3D परिवर्तन फ़ंक्शन्स

translate3d()

rotate3d()

कई रूपांतरणों को संयोजित करना

उपयोग के लिए मुख्य बिंदु

transform-origin प्रॉपर्टी

मूल वाक्यविन्यास

डिफ़ॉल्ट मान

मान निर्दिष्ट करने का तरीका

3D ट्रांसफॉर्मेशन में transform-origin

YouTube Video

`filter` गुण

`blur()`

`brightness()`

`contrast()`

`grayscale()`

`hue-rotate()`

`invert()`

`opacity()`

`saturate()`

`sepia()`

`filter` प्रॉपर्टी का उपयोग करने के फायदे।

`transform` प्रॉपर्टी।

`translate()`

`rotate()`

`scale()`

`skew()`

`matrix()`

`translate3d()`

`rotate3d()`

`transform-origin` प्रॉपर्टी

3D ट्रांसफॉर्मेशन में `transform-origin`