Up next in 10
CSS Transforms MasterClass _ Sigma Web Development Course - Tutorial #42
7 views
Mar 11, 2024
In Tutorial #42 of the Sigma Web Development Course, participants are treated to a CSS Transforms MasterClass. This tutorial delves into the intricacies of CSS transforms, offering comprehensive insights into their usage and application in web development. Viewers can expect to gain a deep understanding of transforming elements with CSS, including rotations, translations, and scaling techniques. Whether you're a novice or an experienced developer, this MasterClass provides valuable knowledge and practical skills to elevate your proficiency in CSS transforms. Join the Sigma Web Development Course for Tutorial #42 and unlock the secrets behind mastering CSS transforms for enhanced web design and development.
View Video Transcript
0:00
कि आज के स्ट्रीड में आप लोगों को सीएसस ट्रांसफॉर्म के बारे में बताऊंगा सीएसस पर ट्रांसफॉर्म द�
0:04
तरह के होते हैं एक होता है टूडी ट्रांसफॉर्म और एक होता है थ्रीडी ट्रांसफॉर्म टूडी ट्रांसफॉर्म क�
0:08
तो हम लोग चेंज करना चाहते हैं किसी भी ऑब्जेक्ट को इन टू डाइमेशनल स्पेस जैसे कि हम उसका स्केल बढ़ा सकत�
0:14
हैं उसको ट्रांसलेट कर सकते हैं हम उसको रोटेट कर सकते हैं थी टी ट्रांस फॉर अधर हैं थ्री डामेंशन प�
0:20
लूप करता है नहीं कि एडिशनल एक्सेस हमारे पास होता है जब एक्सिस जिसकी वजह से थ्री डामेंशन में हम लो�
0:25
एक ऑब्जेक्ट को मैनिपुलेट कर सकते हैं यह सारी चीजें किस तरह से की जाती हैं आप लोग बिल्कुल भी कंफ्यू�
0:30
दोना बस वीडियो को लाइक करके नीचे कमेंट सेक्शन में सिग्मा बैचों पर लिख देना और बाकी का सारा मैं इ�
0:35
वीडियो में देख लूंगा आप लोगों को समझा दूंगा चलते हैं कंप्यूटर स्क्रीन में लेकिन इन प्रोडक्�
0:39
एक अच्छा अपनी कंप्यूटर स्क्रीन में और यहां पर मैंने ऑलरेडी तैयारियां आप लोगों के लिए करके रखी हुई है और आ�
0:54
लोगों को मैं आप जो चीज दिखाने वाला हूं ना आपको भी मजा आने वाला है तो सबसे बड़ा बेसिक स्टार्ट हम लो�
0:59
लेंगे आप एक इंडिक्स टॉट हटीएमल बनाऊंगा बॉयलर पर टेंपलेट लगाऊंगा एक बड़ी बेसिक सी चीज ह�
1:03
ट्रांसफॉर्म तो उसको मैं आप लोगों को बताऊंगा तो मालों मेरे पास एक डिव है जिसमें एक कंटेनर है इसक�
1:09
अंदर एक बॉक्स है बॉक्स को कुछ स्टाइल से दूंगा और इसको सबसे पहले मैं हाइट दूंगा से 50 पिक्सेल्स वि�
1:16
दूंगा इसको से 50 पिक्सेल इसको बैकग्राउंड कलर दूंगा मैं से बीज और इसको एक बॉडर दूंगा टू पिक्से�
1:23
सॉलिड ब्लैक इसका प्रीव्यू देखते हैं और इसका प्रीव्यू कुछ इस तरह से दिख रहा है अब मान लो कि यह जो हमार�
1:29
बॉक्स यह कंटेनर के अंदर है तो मैं जो कंटेनर है उसको मैं विड दे दूंगा 100 वीड़ उसको मैं हाइट द�
1:36
दूंगा सेटीवी एच और मैं उसको बॉडर दे दूंगा बिल्कुल कुछ इसी तरह का बस में जो बॉडर कलर उसको चेंज करक�
1:43
दूंगा पर्पल ठीक है तो यहां पर पर्पल कलर के बॉडर के बॉक्स के अंदर यहां पर मेरा यह आ चुका है बहुत ह�
1:50
बढ़िया यार बहुत ही बढ़िया अब ट्रांसफॉर्म प्रॉपर्टी क्या करती है यह आप लोग देखो ट्रांसफॉर्म प्रॉपर्ट�
1:56
लाइफ कर दिए कुछ ट्रांसफॉर्म्स एलिमेंट के अंदर सबसे पहला जो ट्रांसफॉर्म आप लोगों दिखाना चाहूंगा व�
2:01
रोटेट मालों मैं बॉक्स को रोटेट कराना चाहता हूं तो मैं आप एक ट्रांसफॉर्म प्रॉपर्टी लगा दूंग�
2:05
मैं कुछ ट्रांसफॉर्म और मैं कह दूंगा रोटेट अब रोटेट में आप लोग यहां पर देखो रोटेट है रोटेट थ्र�
2:11
यह रोटेट एक्स रोटेट वाइट रोटेट जी है मैं सबसे पहले आप लोगों को रोटेट दिखाता हूं मानलों मैं इसक�
2:17
40 डिग्री से रोटेट करना चाहता हूं तो यह 40 डिग्री से रोटेट हो जैसे कि आप देख सकते हो मैं काम और करत�
2:23
इसके अंदर बॉक्स लिखी देता हूं ताकि आप लोगों को यहां पर यह बॉक्स दिखें और अगर मान लो आप चाहते हैं इसक�
2:27
अंदर चीजें सेंटर हो जाए यू नोट टू डू डिस्प्लेड फ्लैक्स जस्टिफाई कोंटेंट सेंटर ऑल लाइन आइटम सेंट�
2:35
box center rotate 45 degree 40 degree unit famous turn 0 turn 0 360 0 90 0
3:15
यहां पर कह सकता हूं और रोटेट मानों मैं इसको रोटेट करना चाहता हूं रोटेट एक्स तो यह एक्स के बाद रोटे�
3:21
हो जाएगा और मानों मैं यहां पर लिखता हूं 40 डिग्री मैं यहां पर 40 डीजी लिख सकता हूं और मैं इसको 40
3:27
दी कुछ इस तरह से लिखूंगा और आप लोग देखो कि एक्स में जो है 40 डिग्री रोटेट हो जाएगा सैमी कॉलन में नहीं लगाया आप देखो ये एक्स में 40 डिग्री रोटेट हो गया अब जब मैं कहता हूँ एक्स में रोटेट हो गया ये एक्स एक्सेस के अबाउ�
3:57
और ये मेरी x-axis है, तो x-axis के about ये कुछ इस तरह से rotate होगा
4:02
या इस तरह से rotate होगा, तो उस हिसाब से अगर मैं इसको x-axis के about
4:06
90 degree rotation देता हूँ, तो ये paper thin हो जाएगा, और दिखेगा ही नहीं आपको, और इसी प्रकार अगर मैं यहाँ पर rotate y कर दूं
4:12
तो यह y-axis के about rotate हो जाएगा जैसे कि आप देख सकते हैं और मैं अगर चाहूँ तो इसको just 9 degree rotate कर सकता हूँ आप देखो जैसे थोड़ा सा ही rotate होगा y-axis के about और अगर आप z-axis के about rotate करोगे तो वो भी हो जाएगा आप rotate z भी कर सकते हो और z-axis के about यह rotate हो जाएग�
4:26
जब एक्सेस के बाउट रोटेट इस तरह से हो रहा है सच दाट कि आपकी जो यह एक्सेस ज़ेड़ वाली वह स्क्रीन के अंद�
4:32
जा रही है तो देखो यह इस प्लेन पर ही रोटेट होगा जो कि जो एक्सेस है वह तो जा रही है अंदर स्क्रीन के आ�
4:38
आप लोग इसको समझ गए तो यह होती है मारी रोटेट प्रॉपर्टी इसके बाद हमारे पास के प्रॉपर्टी स्केल में भ�
4:44
आप लोग इसको बड़ा कर सकते हो छोटा कर सकते हो जैसे कि मैं अगर मान लो इसको इसे हटा दूं और मैं आप फि�
4:48
transform और मैं यहां पर लिखूं scale तो देखो scale में भी बहुत सारे हमारे पास options है और एक option मेरे पास है 1.5 या मैं इसको 1.6 times scale करूँ तो यह देखो 1.6 times यह बड़ा हो गया है और अगर मैं चाहूँ सिर्फ x में बड़ा हो तो मैं scale x कर सकता हूँ अगर मैं चाहूँ सिर्फ y में ब�
5:18
आप लोगों को स्क्यू के बारे में बताऊंगा और स्क्यू अगर मान लो मैं इसको कर देता हूं लेटर से फाइव डिग्रीज त�
5:24
मैं इसको जरस समय खुल लगा कर आपको दिखाता हूं और जैसे में स्क्यू कर दूंगा फाइव डिग्रीज तो यह क्यों जाएग�
5:29
क्योंकि यहां से और यहां से पकड़कर खेंच दिया इसे फोर्स लगा दिया और एक ऐसे फोर्स लगा दिया तो य�
5:34
34 Z axis skew skew Z axis crack 34 panel
5:49
लोगों को दिखाता हूं कि आप लोग ट्रांसलेट भी कर सकते हो ट्रांसलेट सबसे ज्यादा यूज होने वाली प्रॉपर्ट�
5:54
होती है मैं अपने एक्सपीरियंस आप लोगों को बता रहा हूं मालों मैं तो थर्डी पिक्सिलructor पिक्सि�
5:59
से ट्रांस लेट हो जाएगा ठीक है अगर मैं तड़ी परसेंट तो जो इसकी विडिटर उसका थर्डी परसेंट से य�
6:05
translate हो जाएगा अगर मैं कहूं 100% तो यह 100% से जो है translate हो जाएगा और मैं इसको एक्स में भ�
6:11
ट्रांसलेट कर सकता हूं और मैं इसको वाइट में भी ट्रांसलेट कर सकता हूं अब यहां पर देखो वाइट में ट्रांसले�
6:16
तो ये नीचे आ जाएगा अब कभी कभी क्या होता है कि हमको एक से जाद�
6:19
transform properties लगानी होती है और जब हमें एक से जादा transform properties
6:23
लगानी होती है तब हम क्या करेंगे तब हम simply spaces से इसको लगा सकते है�
6:27
मालो मैं इसको skew भी करना चाता हूँ skew x करना चाता हूँ let us say
6:31
40 degree और मैं उसी के साथ साथ इसको translate x भी करना चाहता हू�
6:35
और मैं कहूँगा translate x और मैं कह notor इसको save 45% तो ये तीनो transform properties एक साथ apply हो गयी ह�
6:43
देखो translate भी हो गया x और y में skew भी हो गया ठीक है जो जो मैं लगाऊंगा यहाँ पर वो हो जाएगा ठीक ह�
6:48
I hope कि आप लोग समझ गए कि इस तरह से multiple transform properties आप लोग लगा सकते ह�
6:52
अब transform का इस्तिमाल कब किया जाता है mainly तब किया जाता है जब हम लो�
6:56
बना रहे हैं इसे एक nav bar और मैं चाता हूँ कि nav bar छिप जाए तो मैं इसक�
7:00
translate minus 100 pixels minus 100% कर सकता हूँ तो यहाँ से बाहर निकल जाएगा देखो वाइसे बाहर चला गया है ठीक है तो कुछ ऐसा कर सकते हैं हम लोग अगर यहां प�
7:09
मैं स्टार कर दूं कुछ इस तरह से मैं कुछ स्टार और मैं कहूं एम जीरो और मैं कहूं यहां पर पी जीरो और मार्जि�
7:17
लगाकर मैंने देखो इसको कर दिया तो यह ऊपर चला गया बिल्कुल ठीक है तो कुछ इस तरह से कर सकते है�
7:22
हम लोग ट्रांसट एड वा paradox में कर दो माइनस पॉइंट परसेंट तो यह नेगेटिव डिरेक्शन में चला जाएग�
7:29
गया मेरा minus button keyboard का ये रहा अब दबा दिया मैंने अब देखो चला replenish गया इधर coax x में तो कुछ ऐसा कर सकते है आप लोग ठीक है अब एक और property होती है transform
7:37
origin ये क्या होती है अब मैं आप लोगों को बताता हूँ ये क्या होती है मालों मैंने इसको को rotate 0.5 turns किया
7:42
कहां से, किस के about ये rotate होगा, मैं इसको 0.25 कर देता हूँ, ताकि ये
7:46
सिर्फ 45 degrees से turn करे, sorry, 0.125 करना होगा, 45 degrees के लिए
7:50
तो ये देखो, 45 degrees से turn कर रहा है, और, अगर मैं आप लोगों को दिखाओं
7:54
कि इसका जो rotation का point है, वो इसका center है, तो basically आप देखो, मेरा box
7:58
यहाँ पर है, जो default property होती है transform origin की, वो 50-50 होती ह�
8:02
यानि कि center होती है, अब मालो मैं इसको 0-0 कर दो, मैं कहो यार कि ये मेरा 0 ह�
8:06
और ये भी मेरा 0 हो, तो ये rotation इस point के about होगा, ठीक है, मैं आपको दिखाता हू�
8:10
इसको मैं इसको ना degrees में change कर देता हूँ मालो मैं इसको कर देता हूँ 55 degrees
8:15
तो जैसे ही मैं इस number को बढ़ाओंगा आप देखो rotation जो है इस point के about हो रहा ह�
8:19
00 के about जो की origin है अब जैसे है इसकी ये वाली value बढ़ेगी जो 0% ह�
8:24
मालो मैं इसको कर देता हूँ 10% ठीक है origin rotation point about rotation point about screen point box point
8:39
यानि कि अगर मैं इसमें transform ना लगाओ मैं इसमें transform ना लगा�
8:43
तो यहाँ से 10% और यहाँ से नीचे को माल लो मैं अगर 50% लिखता हू�
8:48
तो halfway point पर जो है rotation वाला जो हमारा point है वो आएग�
8:52
जहाँ पर भी उसके coordinates आएगे उस point के about ये rotate करेगा ठीक है, palette भी समझ में आ गया आपको
8:57
use किया जाता है जब आपको एक particular point के about rotate कराना है, but advanced concept है, थोड़ा सा कम इस्तेमाल होता है, यह भी बता दूं आप लोगों को
9:04
इसके बाद एक code with Harry special आप लोगों को दिखाना चाहता हूँ चीज, ये सारी चीज़ें तो I hope आप लोगों ने समझ ली
9:09
अब एक मैंने exhaustive list of demo बनाया हुआ है, और इसमें मैंने डाली हुई एक style.css
9:14
चलो यार इसको preview करते हैं और आपको बता चलेगा, तो ये देखो इसमें ना सारे के सारे जो हमारे transforms हैं
9:20
को मैंने cover करने की कोशिश करी है, तो ये देखो, scale x जो है, वो इस तरह से scale करता है
9:25
scale y जो है, वो इस तरह से scale करेगा, scale कुछ इस तरह से करेगा, x और y दोनों में
9:30
translate x ऐसे करेगा, translate y कुछ ऐसे करेगा, translate ऐसे करेगा
9:34
x और y में दोनों में value लगी हुई है तो और आपको देखना है कौन सी value लगी हुई है तो आप यहां से देख सकते है�
9:39
transition मैंने अभी आप लोगों को बताया नहीं है वो मैं आप लोगों को बताऊंगा तो आप लोग जो है थोड़ा सा wait करें transition के लिए matrix transformation यह हु�
9:47
रोटेट यह हुआ स्क्यू यह हुआ स्क्यू एक्स यह हुआ स्क्यू यह हुआ मेट्रिक्स ट्रीडी यह हुआ ट्रांसलेट ट्रीडी यह हुआ रोटेट इस तरह से होगा कौन से इसके बाद वह रोटेट वाइएक्स इसके बाद यह देखो इस तरह से एक्स एक्स इसके ब�
10:17
हमारी monitor होती है वो तो 2D screen होती है लेकिन ये जो transform properties है ये प्रतीत कराती है ऐसा कि 3D में हमार�
10:23
rotation हो रहा है तो इसकी जो CSS बनाई है वो इस प्रकार से बना�
10:27
कई है such that कि आप लोगों को demo समझ में आया अच्छी तरह स�
10:31
मैंने demo को इस तरह से put together किया है कि आप लोग comment पर भी देखकर पता लगा सको कि वह क्या चल रहा है यहां पर साइड होगी जो डेमो वह हेल्प होगा आप लोगों के लि�
10:39
खुद से ट्राइड करना या इन प्रॉपर्टीज को आई होब आप लोगों को मजा आएगा इस सब को देखने के बाद और अगर सिग्म�
10:45
डेवलपमेंट प्लेडिस्ट को एक्सेस नहीं किया तो या सिगमा डेवलपमेंट प्लेडिस्ट को एक्सेस कर लेन�
10:49
भी क्या भी यहां क्लिक करके इसको करना बुकमाक यह क्लिक करके इसको करना सेव सोर्स कोट जो एक ट�
10:54
अपडेट होता जा रहा है आइंग्यूस वॉचिंग इस वीडियो एड़ आफ सीए यू टेक्स टाइम �