آموزش طراحی سایت-تبدیل دو بعدی در CSS

امروز با مقاله دیگری از آموزش طراحی سایت همراه شما هستیم. در این مقاله سعی داریم تبدیل دو بعدی در CSS3 را با یکدیگر مورد بررسی قرار داده و پس از تبدیل، برخی متدها را بر روی آن پیاده سازی کنیم و تغییرات ایجاد شده را با یکدیگر مشاهده و تحلیل کنیم.

خاصیت Transform (تغییر وضع نمایش عناصر)

خواص transform در CSS3 به طراح وب امکان می دهند عناصر دلخواه را منتقل کرده, چرخانده, مقیاس بندی و همچنین در صورت لزوم اریب دار کند (با زوایای مختلف بچرخانید). خاصیت transformation (تبدیل) در واقع قابلیت تغییر شکل, اندازه و موقعیت المان مورد نظر را فراهم می آورد. CSS3 همچنین قابلیت تبدیل دو بعدی و سه بعدی عناصر را پشتیبانی می کند.

متدهای تبدیل دو بعدی در CSS3

در این بخش با توابع تبدیل دوبعدی عناصر (2D transformation methods) در CSS3 آشنا خواهید شد :

• translate()
• rotate()
• scale()
• skewX()
• skewY()
• matrix()

متد translate() در تبدیل دو بعدی در CSS

متد translate() یک عنصر را از موقعیت فعلی آن حرکت می دهد (البته بر اساس پارامترهایی که برای محورهای X و Y تعیین شده است). در واقع با بهره گیری از این متد می توان المان دلخواه را کپی کرده و آن را به مکانی دیگر انتقال داد. مثال زیر تگ یا عنصر div را به اندازه ی 50 پیکسل به سمت راست و 100 پیکسل پایین تر از موقعیت جاری آن حرکت می دهد :

div {
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari */
transform: translate(50px,100px);
}

تابع rotate()

متد rotate() بسته به درجه ی تعیین شده یک عنصر را در جهت عقربه ی ساعت یا در جهت خلاف آن می چرخاند (دوران می کند). مثالی که زیر مشاهده می کنید المان div را به اندازه ی 20 درجه در جهت حرکت عقربه ی ساعت می چرخاند :

div {
-ms-transform: rotate(20deg); /* IE 9 */
-webkit-transform: rotate(20deg); /* Safari */
transform: rotate(20deg);
}

استفاده از مقادیر منفی (negative values) باعث می شود عنصر خلاف عقربه ی ساعت چرخانده شود. مثال زیر المان div را 20 درجه در خلاف جهت عقربه ی ساعت حرکت می دهد (می چرخاند) :

div {
-ms-transform: rotate(-20deg); /* IE 9 */
-webkit-transform: rotate(-20deg); /* Safari */
transform: rotate(-20deg);
}

متد Scale()

تابع scale() اندازه ی المان را افزایش یا کاهش می دهد (کوچک و بزرگ می کند). این کار بر اساس پارامترهایی که برای طول و عرض (height ,width) تعریف می شود صورت می پذیرد. مثال زیر عرض یا پهنای المان div را دو برابر عرض و پهنای اصلی و طول یا ارتفاع آن را سه برابر طول اصلی آن المان تعریف می کند :

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);
}

متد Skew()

می توانید عنصر مورد نظر خود را در 2 جهت عمودی و افقی به صورت 3 بعدی، بر حسب واحد deg و اندازه ی مشخص شده بچرخوانید. به عبارت دیگر به کمک این متد می توان عنصر مورد نظر را با زوایای مختلف حتی 360 بچرخانید. مثال زیر المان div را به اندازه ی 20 درجه در امتداد محور x (x-axis) و در امتداد محور Y به اندازه ی 10 درجه می چرخاند می کند :

div {
-ms-transform: skew(20deg, 10deg); /* IE 9 */
-webkit-transform: skew(20deg, 10deg); /* Safari */
transform: skew(20deg, 10deg);
}

تابع skewX()

متد skewX() یک المان را در امتداد محور X بر حسب واحد deg می چرخاند. br نمونه ی زیر المان div را در امتداد محور X به اندازه ی 20 درجه می چرخاند :

div {
-ms-transform: skewX(20deg); /* IE 9 */
-webkit-transform: skewX(20deg); /* Safari */
transform: skewX(20deg);
}

تابع skewY()

متد skewY() یک عنصر را در امتداد محور Y به اندازه ی درجه ی زاویه ی تعیین شده (بر حسب واحد deg) می چرخاند. مثال زیر عنصر div را به اندازه ی 20 درجه در امتداد محور Y می چرخاند :

div {
-ms-transform: skewY(20deg); /* IE 9 */
-webkit-transform: skewY(20deg); /* Safari */
transform: skewY(20deg);
}

حال چنانچه پارامتر دومی تعیین نشده باشد, مقداری 0 خواهد داشت. بنابراین مثال زیر المان div را به اندازه 20 درجه در امتداد محور X می چرخاند :

div {
-ms-transform: skew(20deg); /* IE 9 */
-webkit-transform: skew(20deg); /* Safari */
transform: skew(20deg);
} 

متد matrix()

متد matrix() کلیه ی متدهای تبدیل دو بعدی را در یک تابع واحد می گنجاند (ادغام می کند). تابع matrix() 6 مقدار می گیرد, که شامل توابع ریاضی (mathematics functions) می شود و به شما امکان می دهد المان های خود را بچرخانید, مقایس بندی (کوچک و بزرگ) کنید, حرکت دهید (translate: انتقال دادن) و همچنین آن ها را مطابق نیاز با زوایای مختلف بچرخانید (skew) کنید :

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);
}

تمامی خاصیت های transform CSS3 به ترتیب زیر می باشند :

• خاصیت transform : وضعیت نمایش المان را به دو بعدی یا سه بعدی تبدیل می کند.
• خاصیت transform-origin : اجازه می دهد موقعیت المان های تبدیل شده (transformed element) را تغییر دهید.

متدهای تبدیل دو بعدی نیز به شرح زیر هستند :

• متد (matrix(n,n,n,n,n,n : تبدیل دو بعدی عنصر را با تابع matrix که 6 مقدار به آن اختصاص داده شده باشد, تعریف می کند.
• متد (translate(x,y : انتقال دو بعدی عنصر را در حول محورهای X و Y مقدار دهی می کند.
• متد (translateX(n : انتقال دو بعدی عنصر را در طول محور X تعریف می کند.
• متد (translateY(n : انتقال دو بعدی عنصر را امتداد محور Y تنظیم و مقدار دهی می کند.
• متد (scale(x,y : مقیاس بندی عنصر را به صورت دو بعدی تعیین کرده, طول و عرض عناصر را اصلاح می کند.
• متد (scaleX(n : مقیاس بندی عنصر را به صورت دو بعدی تعریف کرده, عرض عنصر را تغییر می دهد.
• متد (scaleY(n : تبدیل مقیاس عنصر را به صورت دو بعدی تعریف کرده, ارتفاع یا طول آن را اصلاح می کند.
• متد (rotate(angle : چرخش عنصر را به صورت دو بعدی تعریف می کند و زاویه ی آن را در پارامتر مربوطه تعیین می کند.
• متد (skew(x-angle,y-angle : عنصر را در امتداد هر دو محور X و Y به صورت دو بعدی بسته به مقدار تعیین شده می چرخاند.
• متد (skewX(angle : عنصر را به صورت دو بعدی در امتداد محور X می چرخاند (تغییر و تبدیل وضعیت عنصر را به صورت دو بعدی در حول محور X مقداردهی و تعریف می کند).
• متد (skewY(angle : عنصر را به صورت دو بعدی در امتدادی محور Y (بر اساس مقدار تعیین شده) می چرخاند.

با مقاله های دیگر ما در زمینه آموزش طراحی سایت همراه باشید...