تغییرات 2D CSS
- صفحه قبلی شطراع فونت شبکه CSS
- صفحه بعدی تغییرات 3D CSS
تغییرات 2D CSS
CSS تبدیلی (transforms) آپ کو عناصر کو موٹنے، چکر لگانے، سائز بڑھانے یا کم کرنے اور کج کرنے کی اجازت دیتا ہے.
اس عناصر کا انگرڈین کرسکتے ہیں، تاکہ 2D تبدیلی دیکھ سکیں:
اس باب میں آپ کسی سے درج ذیل CSS امتیازیں سیکھیں گے:
transform
براؤزر کی امداد
جداول میں شمارا تاحتمی طور پر اس کی امداد کی گئی پہلی براؤزر کی نسلیں کا ذکر کیا گیا ہے.
| ویژگی | کروم | آئی ای | فائر فاکس | سافری | آپرا |
|---|---|---|---|---|---|
| transform | 36.0 | 10.0 | 16.0 | 9.0 | 23.0 |
روش تبدیلات دو بعدی CSS
CSS کا استعمال کر کے transform آپ کسی بھی از پارامتروں کا استعمال کرسکتے ہیں، جو درج ذیل 2D تبدیلی طریقوں کا استعمال کر سکتے ہیں:
translate()rotate()scaleX()scaleY()scale()skewX()skewY()skew()matrix()
تذکرہ:آپ نے اگلے باب میں 3D تبدیلی سیکھیں گے.
translate() طریق
translate() عناصر کو اس کی موجودہ پوزیشن سے (X اور Y کی بناء پر معین پارامتروں کی بناء پر) بھیجنا.
مثال میگوید کہ <div> عناصر کو اس کی موجودہ پوزیشن سے 50 پیکسلو ایک طرح سے بھیج دیا جاتا ہے اور 100 پیکسلو دوسرے طرح سے بھیج دیا جاتا ہے:
مثال
div {
transform: translate(50px, 100px);
}
rotate() طریق
rotate() عناصر کو معینہ درجے کی بناء پر سمت سمت یا معکوس سمت میں چکر لگانا.
مثال میگوید کہ <div> عناصر کو 20 درجے میں سمت سمت میں چکر لگانا:
مثال
div {
transform: rotate(20deg);
}
منفی کا استعمال سے عناصر کو معکوس سمت میں چکر لگانا.
مثال میگوید کہ <div> عناصر کو 20 درجے میں معکوس سمت میں چکر لگانا:
مثال
div {
transform: rotate(-20deg);
}
scale() طریق
scale() عناصر کی قطرے میں اضافہ یا کمی کرنے والی طریق (عنصر کی دیکھی گئی قطرے اور بلندی کے متعلق پارامتروں کی بناء پر).
مثال میگوید کہ <div> عناصر کو اصل قطرے کی دو گنا اور اصل بلندی کی تین گنا بڑھا دیا جاتا ہے:
مثال
div {
transform: scale(2, 3);
}
مثال میگوید کہ <div> عناصر کو اصل قطرے اور اصل بلندی کی نصف میں کم کر دیا جاتا ہے:
مثال
div {
transform: scale(0.5, 0.5);
}
scaleX() طریق
scaleX() عناصر کی قطرے میں اضافہ یا کمی کرنے والی طریق.
مثال میگوید کہ <div> عناصر کو اصل قطرے کی دو گنا بڑھا دیا جاتا ہے:
مثال
div {
transform: scaleX(2);
}
مثال میگوید کہ <div> عناصر کو اصل قطرے کی نصف میں کم کر دیا جاتا ہے:
مثال
div {
transform: scaleX(0.5);
}
روش scaleY()
scaleY() این روش ارتفاع عنصر را افزایش یا کاهش میدهد.
مثال زیر باعث میشود که عنصر <div> به سه برابر ارتفاع اولیهاش افزایش یابد:
مثال
div {
transform: scaleY(3);
}
مثال زیر باعث میشود که عنصر <div> به نصف ارتفاع اولیهاش کاهش یابد:
مثال
div {
transform: scaleY(0.5);
}
روش skewX()
skewX() این روش باعث میشود که عنصر به صورت مشخص شده در محور X کج شود.
مثال زیر باعث میشود که عنصر <div> به صورت 20 درجه در محور X کج شود:
مثال
div {
transform: skewX(20deg);
}
روش skewY()
skewY() این روش باعث میشود که عنصر به صورت مشخص شده در محور Y کج شود.
مثال زیر باعث میشود که عنصر <div> به صورت 20 درجه در محور Y کج شود:
مثال
div {
transform: skewY(20deg);
}
روش skew()
skew() این روش باعث میشود که عنصر به صورت مشخص شده در محور X و Y کج شود.
مثال زیر باعث میشود که عنصر <div> به صورت 20 درجه در محور X و 10 درجه در محور Y کج شود:
مثال
div {
transform: skew(20deg, 10deg);
}
اگر پارامتر دوم مشخص نشده باشد، مقدار آن صفر است. بنابراین، مثال زیر باعث میشود که عنصر <div> به صورت 20 درجه در محور X کج شود:
مثال
div {
transform: skew(20deg);
}
روش matrix()
matrix() این روش تمام روشهای تبدیل دو بعدی را به یک مجموعه ترکیب میکند.
matrix() این روش شش پارامتر را میپذیرد، از جمله توابع ریاضی، که به شما اجازه میدهد عنصر را بچرخانید، بزرگتر یا کوچکتر کنید (ترanstlate)، و به آن کج کنید.
پارامترها به شرح زیر است: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
مثال
div {
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
ویژگیهای تبدیل CSS
جداول زیر تمام ویژگیهای تبدیلات دو بعدی را لیست میکنند:
| ویژگی | توضیح |
|---|---|
| transform | تبدیل 2D یا 3D به عنصر اعمال کنید. |
| transform-origin | اجازه میدهد که موقعیت عنصر تبدیل شده را تغییر دهید. |
روش تبدیلات دو بعدی CSS
| دستور العمل | توضیح |
|---|---|
| matrix(n,n,n,n,n,n) | تعریف تبدیلات دو بعدی، استفاده از ماتریس شش مقادیر. |
| translate(x,y) | تعریف تبدیلات دو بعدی، حرکت عنصر در طول محور X و Y. |
| translateX(n) | تعریف تبدیلات دو بعدی، حرکت عنصر در طول محور X. |
| translateY(n) | تعریف تبدیلات دو بعدی، حرکت عنصر در طول محور Y. |
| scale(x,y) | تعریف تغییرات بزرگنمایی 2D، تغییر عرض و ارتفاع عنصر. |
| scaleX(n) | تعریف تغییرات بزرگنمایی 2D، تغییر عرض عنصر. |
| scaleY(n) | تعریف تغییرات بزرگنمایی 2D، تغییر ارتفاع عنصر. |
| rotate(angle) | تعریف چرخش 2D، در پارامترها تعیین میشود. |
| skew(x-angle,y-angle) | تعریف تغییرات شیار 2D، در طول محور X و Y. |
| skewX(angle) | تعریف تغییرات شیار 2D، در طول محور X. |
| skewY(angle) | تعریف تغییرات شیار 2D، در طول محور Y. |
- صفحه قبلی شطراع فونت شبکه CSS
- صفحه بعدی تغییرات 3D CSS
