مقدمه
با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش CSS را دنبال می کنند. یکی از قابلیت های جذابی که در نسخه های اخیر CSS به ویژه در نسخه ی CSS3 معرفی و توسعه یافته قابلیت تبدیل دوبعدی در CSS است، این ویژگی به شما اجازه می دهد تا انواع حرکات ، انتقال ها و چرخش ها را روی عناصر HTML اعمال کنید، همچنین با اعمال یک قابلیت انیمیشن به تبدیلات می توان افکت های حرکت آهسته ی تبدیل را به عنصر اعمال کرده و جذابیت کار را دو چندان کرد. در ادامه ی این مبحث ما شما را با روش کار با تبدیل دو بعدی در CSS آشنا خواهیم کرد.
تبدیل دو بعدی در CSS
در این آموزش ما شما را با انواع تبدیل دوبعدی ها در CSS و ساختار آن آشنا می کنیم.
تبدیل CSS به شما اجازه می دهد که تبدیل های translate, rotate, scale و skew روی عناصر اعمال کنید.
transformation یک افکت است که اجازه می دهد شکل اندازه و موقعیت عناصر HTML در صفحه وب تغییر کند.
در CSS از تبدیل های دوبعدی و سه بعدی پشتیبانی می شود.
تبدیل دو بعدی در CSS
مرورگرهایی که از قابلیت تبدیل دوبعدی ها در css پشتیبانی می کنند:
اعدادی که در جدول مشاهده می کنید، نسخه ی هر مرورگر است.
اعداد قبل از پیشوندهای -ms-, -webkit-, -moz-, or -o- نسخه قدیمی تر مرورگر را نشان می دهد که باید از این پیشوندها استفاده کند.
| Property | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
|---|
| transform | ۳۶٫۰
۴٫۰ -webkit- | ۱۰٫۰
۹٫۰ -ms- | ۱۶٫۰
۳٫۵ -moz- | ۹٫۰
۳٫۲ -webkit- | ۲۳٫۰
۱۵٫۰ -webkit-
۱۲٫۱
۱۰٫۵ -o- |
transform-origin
(two-value syntax) | ۳۶٫۰
۴٫۰ -webkit- | ۱۰٫۰
۹٫۰ -ms- | ۱۶٫۰
۳٫۵ -moz- | ۹٫۰
۳٫۲ -webkit- | ۲۳٫۰
۱۵٫۰ -webkit-
۱۲٫۱
۱۰٫۵ -o- |
انواع تبدیل دوبعدی ها در CSS
متدهای تبدیل دوبعدی شامل موارد زیر است:
translate()rotate()scale()skewX()skewY()matrix()
متد ()translate
تبدیل دوبعدی ها در CSS -جا به جایی
متد translate() یک عنصر HTML را از موقعیت جاری خود جا به جا می کند.
در مثال زیر عنصر <div> از موقعیت جاری خود به اندازه ی ۵۰ پیکسل به راست و ۱۰۰ پیکسل به پایین منتقل می شود:
مثال : انتقال عناصر html
| div { -ms-transform: translate(50px, 100px); /* IE 9 */ -webkit-transform: translate(50px, 100px); /* Safari */ transform: translate(50px, 100px); } |
متد ()rotate
متد rotate() عناصر html را درجهت عقربه های ساعت یا خلاف جهت عقربه های ساعت در موقعیت جاری خود می چرخاند.
مثال زیر عنصر <div> را در جهت عقربه های ساعت به میزان ۲۰ درجه می چرخاند:
مثال : چرخش عناصر html
| div { -ms-transform: rotate(20deg); /* IE 9 */ -webkit-transform: rotate(20deg); /* Safari */ transform: rotate(20deg); } |
با استفاده از مقادیر منفی می توان عناصر html را در خلاف جهت عقربه های ساعت بچرخانید.
مثال زیر عنصر <div> را در خلاف جهت عقربه های ساعت به میزان ۲۰ درجه می چرخاند:
مثال : نمونه ای دیگر از چرخش عناصر html
| div { -ms-transform: rotate(-20deg); /* IE 9 */ -webkit-transform: rotate(-20deg); /* Safari */ transform: rotate(-20deg); } |
تابع ()scale
تبدیل دو بعدی در CSS -تابع scale
تابع scale() اندازه ی یک عنصر html را افزایش و یا کاهش می دهند (تغییر اندازه بر اساس پارامترهای دریافتی انجام می شود).
مثال زیر اندازه ی یک عنصر <div> را در عرض دو برابر و در ارتفاع ۳ برابر بزرگ می کند:
مثال : تغییر اندازه عناصر html
| div { -ms-transform: scale(2, 3); /* IE 9 */ -webkit-transform: scale(2, 3); /* Safari */ transform: scale(2, 3); } |
مثال زیر عنصر <div> را در عرض و ارتفاع به اندازه ی نصف اندازه ی اصلی تغییر می دهد:
مثال : نمونه ای دیگر از تغییر اندازه عناصر
| div { -ms-transform: scale(0.5, 0.5); /* IE 9 */ -webkit-transform: scale(0.5, 0.5); /* Safari */ transform: scale(0.5, 0.5); } |
متد ()skewX
متد skewX() عنصر را در جهت محور x یا y کج می کند.
در مثال زیر عنصر <div> در جهت محور x به اندازه ی ۲۰ درجه کج می شود:
مثال : کج کردن عناصر html
| div { -ms-transform: skewX(20deg); /* IE 9 */ -webkit-transform: skewX(20deg); /* Safari */ transform: skewX(20deg); } |
متد ()skewY
متد skewY() یک عنصر را در جهت محور Y ها به اندازه ی زاویه ی دریافتی می چرخاند.
مثال زیر عنصر <div> را به اندازه ی ۲۰ درجه در جهت محور Yها کج می کند:
مثال : کج کردن عناصر html بر اساس محور y
| div { -ms-transform: skewY(20deg); /* IE 9 */ -webkit-transform: skewY(20deg); /* Safari */ transform: skewY(20deg); } |
متد ()skew
متد skew() یک عنصر را در جهت محورهای X و Y می چرخاند.
مثال زیر عنصر <div> را به اندازه ی ۲۰ درجه در جهت محور Xها و ۱۰ درجه در محور Yها می چرخاند:
مثال : تابع skew
| div { -ms-transform: skew(20deg, 10deg); /* IE 9 */ -webkit-transform: skew(20deg, 10deg); /* Safari */ transform: skew(20deg, 10deg); } |
اگر پارامتر دوم تعیین نشود مقدار آن ۰ در نظر گرفته می شود، بنابراین عنصر <div> فقط ۲۰ درجه در جهت محور xها می چرخد:
مثال : مثالی دیگر از skew
| div { -ms-transform: skew(20deg); /* IE 9 */ -webkit-transform: skew(20deg); /* Safari */ transform: skew(20deg); } |
متد ()matrix
تبدیل دوبعدی ها در CSS – تابع ماتریکس
تابع matrix() تمام تبدیلات دوبعدی را در یک متد خلاصه می کند.
متد matrix() شش پارامتر را می گیرد. که شامل توابع محسباتی است که اجازه ی جا به جایی ، دوران ، تغییر اندازه و کج کردن عناصر html را فراهم می کند.
فرمت متد matrix و پارامترهای آن : (()matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY
مثال : تابع matrix
| div { -ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */ -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */ transform: matrix(1, -0.3, 0, 1, 0, 0); } |
خصوصیات تبدیل دوبعدی در CSS
| خصوصیت | توضیحات |
|---|
| transform | یک تبدیل ۲D یا ۳D به یک عنصر را اعمال می کند. |
| transform-origin | به شما اجازه می دهد موقعیت را در عناصر تبدیل شده تغییر دهید. |
متدهای تبدیل دو بعدی در CSS
| تابع | توضیحات |
|---|
| (matrix(n,n,n,n,n,n | یک تغییر ۲D را با استفاده از یک ماتریس از ۶ مقدار تعریف می کند. |
| (translate(x,y | یک ترجمه ۲D را تعریف می کند، عنصر را در امتداد X و Y محور حرکت می دهد. |
| (translateX(n | یک ترجمه ۲D را تعریف می کند، عنصر را در امتداد محور X حرکت می دهد. |
| (translateY(n | یک ترجمه ۲D را تعریف می کند، عنصر را در امتداد محور Y حرکت می دهد. |
| (scale(x,y | تغییر عرض و ارتفاع عناصر. |
| (scaleX(n | تغییر عرض عناصر |
| (scaleY(n | تغییر ارتفاع عناصر |
| (rotate(angle | چرخش عناصر |
| (skew(x-angle,y-angle | کج کردن عناصر در جهت X و Y |
| (skewX(angle | کج کردن عناصر در جهت محور X |
| (skewY(angle | کج کردن عناصر در جهت محورY |
کلام آخر
قابلیت تبدیل دو بعدی در CSS در بسیاری از وب سایت ها برای ایجاد جلوه های زیبا در بخش های مختلف به طور گسترده ای استفاده می شود، با توجه به تاثیر این قابلیت در زیبایی و جذابیت وب سایت مباحث این بخش را به آشنایی با تبدیل دوبعدی ها در CSS اختصاص دادیم.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
