تغییرات 2D CSS
- صفحه قبلی شهره‌های شبکه CSS
- صفحه بعدی تغییرات 3D CSS
تغییرات 2D CSS
تبدیل‌های CSS (transforms) به شما امکان می‌دهند که عناصر را حرکت دهید، بچرخانید، بزرگ‌تر یا کوچکتر کنید و مایل کنید.
برای مشاهده تبدیل‌های 2D، ماوس خود را بر روی عناصر زیر قرار دهید:
در این فصل، شما از این ویژگی‌های CSS یاد خواهید گرفت:
transform
پشتیبانی مرورگر
اعداد در جدول نشان‌دهنده نسخه اولین مرورگر هستند که این ویژگی را به طور کامل پشتیبانی می‌کند.
| ویژگی | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| 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() این روش شش پارامتر را می‌پذیرد، از جمله توابع ریاضی، که به شما اجازه می‌دهد تا عنصر را بچرخانید، بزرگ‌کنید، حرکت دهید (ترجمه) و مایل کنید.
پارامترها به شرح زیر است: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
مثال
div {
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
ویژگی‌های تغییرات CSS
جدول زیر تمام ویژگی‌های تغییرات دو بعدی را لیست می‌کند:
| ویژگی | توضیحات |
|---|---|
| transform | تطبیق تغییرات دو بعدی یا سه بعدی به عنصر. |
| 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
