سی ایس ایس میں ٹرانسفارم کا بہترین استعمال کیسے کریں؟

اس مضمون میں ہم ٹرانسفارم ان کو سمجھیں گے ایک تفصیلی عملی مظاہرے کے ساتھ تفصیل سے اور اس کی پیروی کریں۔ اس مضمون میں مندرجہ ذیل نکات کا احاطہ کیا جائے گا ،

• سی ایس ایس کو تبدیل کیا ہے؟
• مختلف خصوصیات میں تبدیلیاں کیا ہیں؟

ویب سائٹ کی خصوصیات میں اضافے کے ساتھ ، یہ بھی اتنا ہی ضروری ہے کہ آپ اپنی ویب سائٹ پر چالاک انضمام فراہم کریں تاکہ اس کو پرکشش اور بہتر بنایا جاسکے۔ آپ کی سائٹ کی تعریف کرنے والے سی ایس ایس کے متعدد عناصر کا اضافہ وقت کی ضرورت ہے۔
لوگ ان ویب سائٹوں سے دور رہتے ہیں جو عوام کو واقعتا appeal پسند نہیں کرتے ہیں۔ لہذا ، کس طرح کم عنصر قدر کو اپنے عناصر میں سے کچھ کو تبدیل کرنے اور اپنے CSS کو خوبصورت بنانے کی کوشش کریں۔
اسی طرح کی ضروریات کو پورا کرنے کے لئے ، ہمارے پاس سی ایس ایس پراپرٹی کو تبدیل کرنا ہے جو عناصر کو اسکینگ ، گھومنے ، اسکیلنگ ، یا ترجمہ کرکے تبدیل کرتا ہے۔

سی ایس ایس میں ٹرانسفارم پر اس مضمون کے ساتھ آگے بڑھ رہے ہیں

سی ایس ایس کو تبدیل کیا ہے؟

سی ایس ایس عنصر کو تبدیل کرنے کا مطلب ہے کہ اسے 2D یا 3D شکل میں ایک کنارے فراہم کرنا ہے۔ یہ کسی عنصر کے اسٹائل کو ضعف طور پر تبدیل کرتا ہے۔
X اور Y محور پر 2D تبدیلی کام کرتی ہے۔ آپ تبدیل کرنے کے ل both دونوں محور پر کوئی بھی کنارے یا ساخت مہی .ا کرسکتے ہیں۔ جبکہ 3D تبدیلی کے ل، ، اس کو X ، Y کے ساتھ ساتھ Z محور پر بھی کام کرنے کی ضرورت ہے تاکہ ضروری گہرائی فراہم کی جاسکے۔

سی ایس ایس 2D تبدیل خصوصیات:

سی ایس ایس 3D تبدیلی خصوصیات:

مثال کے طور پر:

سی ایس ایس. عنصر {چوڑائی: 20px اونچائی: 20px ٹرانسفارم: پیمانہ (20)

اب ، جب آپ ایسا کرتے ہیں تو ، متعین عنصر کو 20 گنا کم کیا جائے گا۔

نہ صرف یہ ، آپ افقی اسکیلنگ اور عمودی پیمانے کے لئے بھی محور کو پیمانہ کرسکتے ہیں۔

ٹرانسفارم: اسکیل ایکس (2) ٹرانسفارم: اسکیل وائی (.5)

تمام براؤزرز میں ایک مناسب تبدیلی فراہم کرنے کے لئے:

div {-webkit-transform: पैमाने (1.5) -موز-ٹرانسفارم: پیمانہ (1.5) -و-ٹرانسفارم: پیمانہ (1.5) ٹرانسفارم: پیمانہ (1.5)

ٹرانسفارم سی ایس ایس پراپرٹی سی ایس ایس بصری فارمیٹنگ کی سطح کے مربوط جگہ کو بہتر بناتا ہے۔
بصری شکل کی سطح کیا ہے؟
بصری شکل سازی کی سطح کا مطلب کسی دستاویز پر کارروائی کرنا اور اسے میڈیا پلیٹ فارمز پر ضعف طور پر پیش کرنا ہے۔ بصری شکل دینے سے ، آپ ہر عنصر کو ایک ماڈل کی حیثیت سے تبدیل کرسکتے ہیں جو سی ایس ایس باکس ماڈل سے متفق ہے۔ سی ایس ایس باکس ماڈل سائز ، پوزیشن اور خصوصیات کو واضح کرتے ہوئے ایک آئتاکار باکس شکل میں معیاری مستطیل کرتا ہے۔
نوٹ: صرف تغیر پذیر عناصر ہی تبدیل ہوسکتے ہیں۔

سی ایس ایس میں ٹرانسفارم پر اس مضمون کے ساتھ آگے بڑھ رہے ہیں

مختلف خصوصیات میں تبدیلیاں کیا ہیں؟

آئیے تبدیل کرنے والی تمام خصوصیات کو دیکھیں:

1. اسکیل (): اسکیلنگ کا مطلب عنصر کا سائز افقی یا عمودی طور پر تبدیل کرنا ہے۔

عمودی پیمانے کے لئے:اسکیل ایکس

افقی پیمانے کے لئے:پیمانہ

کسی عنصر کے ل you ، آپ فونٹ سائز ، بھرتی ، اونچائی یا چوڑائی کو بھی تبدیل کرسکتے ہیں۔ پہلے سے طے شدہ قیمت 1 ہے جس کا مطلب یہ بھی ہے کہ 0.5 فراہم کرنا کیونکہ قیمت اس میں آدھی ہوجاتی ہے جبکہ اسکیلنگ کو 2 ڈبل فراہم کرتی ہے۔

2. skew (): اسکیو پراپرٹی کسی صارف کو کسی عنصر کو ایک کوآرڈینیٹ پوائنٹ سے دائیں یا بائیں طرف جھکانے کی اجازت دیتی ہے۔ یہ قریب قریب ایک مثلث کو متوازیگرام میں تبدیل کرنے کی طرح ہے۔ آپ کسی عنصر کو اس کے نقاط کے ذریعہ اسکیچ کرسکتے ہیں۔

مثال:

.element {transform: skewX (25deg)} .element {transform: skewY (25deg)

جب آپ ایسا کرتے ہیں تو ، عنصر skewX یا skewY کا استعمال کرکے افقی اور عمودی طور پر 25 ڈگری اسکیو کرتا ہے۔

3. گھمائیں ( ) : آپ اس پراپرٹی کا استعمال کرکے عنصر کو گھڑی کی سمت گھما سکتے ہیں۔ آپ اسے اصل مقام پر واپس لانے کے لئے اسے 180 ڈگری یا 360 ڈگری گھما سکتے ہیں۔

.element {transform: rotate (25deg)}

گھماؤ بھی مہی .ا کرنے کے ل you ، آپ تین جہتوں میں سے کسی ایک کو استعمال کرسکتے ہیں: روٹیٹ ایکس ، روٹیٹ وائی ، یا روٹی زیٹ۔

4. ترجمہ ( ) : آپ کسی عنصر کو صحیح طور پر الٹا یا آس پاس منتقل کرسکتے ہیں۔

.element {transform: ترجمہ (20px، 10px)}

ترجمہ کسی شے / عنصر کو اوپر کی طرف یا آس پاس منتقل کیا جائے گا۔ پہلی مخصوص قدر آبجیکٹ کے دائیں وارڈز کو منتقل کرتی ہے (منفی اسے بائیں طرف منتقل کرے گی) اور دوسری قدر اسے نیچے حرکت میں لاتی ہے (منفی قدر کی وضاحت کرنا اسے اوپر کی طرف لے جاتا ہے)۔

اگر یہ آپ کو الجھا سکتا ہے تو ، پھر افقی عنصر کی پوزیشن کو افقی طور پر تبدیل کرنے کے لئے X محور اور عمودی طور پر پوزیشن کو تبدیل کرنے کے لئے Y محور کا اطلاق کریں۔ ٹرانسفارم پراپرٹی کے بارے میں سب سے حیرت انگیز پہلو یہ ہے کہ ، ٹرانسفارم کا اطلاق ہی عنصر کو ہر دوسرے عنصر یا متن کو برقرار رکھنے کے ساتھ ہی حرکت پذیر ہوجائے گا۔ فاصلہ عام طور پر پکسلز یا فیصد میں لیا جاتا ہے۔

مثال کے طور پر:

.element {transform: transteX (value) transform: translateY (value)}

5. تناظر (): آپ کسی عنصر کے تناظر میں گہرائی فراہم کرسکتے ہیں۔ یہ کسی عنصر کو تبدیلی میں مکعب بنا کر 3D میں تبدیلی کی اجازت دیتا ہے۔
مترجم 3 ڈی (x ، y ، زیڈ)
ٹرانسلیٹ زیڈ (زیڈ)

transte3d (x، y، z) ٹرانسلیٹ زیڈ (زیڈ)

زیڈ محور کا تعارف عنصر کو 3D تصور دیتا ہے۔ ٹرانسلیٹ زیڈ () عنصر کو دیکھنے والے کی طرف بڑھاتا ہے جبکہ منفی قدر اسے دور کرتی ہے۔

6. میٹرکس () : تمام تر تبدیلیوں کو یکجا کریں۔

گھمائیں (45 ڈگ) ترجمہ (24px ، 25px)

میٹرکس () کو لاگو کرنے سے سارے ٹرانسفارم پراپرٹی کو ایک صف میں مل جاتا ہے۔

ٹرانسفارم پراپرٹیز کا اطلاق آپ کے عنصر اور اس وجہ سے آپ کی ویب سائٹ کی اپیل میں بہت حد تک اضافہ کرسکتا ہے۔ ان کی کوشش کرو!

یہ ہمیں CSS میں Transform میں اس مضمون کے اختتام تک پہنچا ہے۔

اگر آپ ویب ڈویلپمنٹ کے بارے میں مزید معلومات حاصل کرنے میں دلچسپی رکھتے ہیں تو ، چیک کریں بذریعہ ایڈوریکا۔ ویب ڈویلپمنٹ سرٹیفیکیشن ٹریننگ آپ کو HTML5 ، CSS3 ، ٹویٹر بوٹسٹریپ 3 ، jQuery اور گوگل API کا استعمال کرتے ہوئے متاثر کن ویب سائٹ بنانے اور اسے ایمیزون سادہ اسٹوریج سروس (S3) پر تعینات کرنے میں مدد ملے گی۔

اگر آپ ابھی بھی دلچسپی رکھتے ہیں اگر آپ کو کوئی سوال ہے تو ، آپ اسے اس 'سی ایس ایس کیا ہے' بلاگ کے کمنٹ سیکشن میں پوسٹ کرسکتے ہیں ، اور ہم جتنی جلدی ممکن ہو آپ کے پاس واپس آجائیں گے۔