خاصیت Transform

خاصیت Transform

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

خاصیت Transform خاصیت Transform خاصیت Transform Transform 1

خاصیت Transform

مرورگرهایی که از خاصیت تبدیل دوبعدی پشتیبانی می کنند در جدول زیر ارائه شده است:

خاصیت 

IE

Chrome

Firefox

Safari

Opera

transform

۱۰٫۰
۹٫۰ -ms-

۳۶٫۰
۴٫۰ -webkit-

۱۶٫۰
۳٫۵ -moz-

۳٫۲ -webkit-

۲۳٫۰
۱۵٫۰ -webkit-
12.1
10.5 -o-

transform-origin
(two-value syntax)

۱۰٫۰
۹٫۰ -ms-

۳۶٫۰
۴٫۰ -webkit-

۱۶٫۰
۳٫۵ -moz-

۳٫۲ -webkit-

۲۳٫۰
۱۵٫۰ -webkit-
12.1
10.5 -o-

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

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

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

متد translate()

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

مثال زیر تگ یا عنصر <div> را به اندازه ی ۵۰ پیکسل به سمت راست و ۱۰۰ پیکسل پایین تر از موقعیت جاری آن حرکت می دهد:

تابع rotate() 

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

مثالی که زیر مشاهده می کنید المان <div> را به اندازه ی ۲۰ درجه در جهت حرکت عقربه ی ساعت می چرخاند:

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

مثال زیر المان <div> را ۲۰ درجه در خلاف جهت عقربه ی ساعت حرکت می دهد (می چرخاند):

متد Scale()

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

مثال زیر عرض یا پهنای المان <div> را دو برابر عرض و پهنای اصلی و طول یا ارتفاع آن را سه برابر طول اصلی آن المان تعریف می کند:

نمونه ی زیر عنصر <div> را نصف عرض و ارتفاع اصلی خود عنصر تعیین می کند:

متد Skew()

می توانید عنصر مورد نظر خود را در ۲ جهت عمودی و افقی به صورت ۳ بعدی، بر حسب واحد deg و اندازه ی مشخص شده بچرخوانید. به عبارت دیگر به کمک این متد می توان عنصر مورد نظر را با زوایای مختلف حتی ۳۶۰ بچرخانید.

مثال زیر المان <div> را به اندازه ی ۲۰ درجه در امتداد محور x (x-axis) و در امتداد محور Y به اندازه ی ۱۰ درجه می چرخاند می کند:

تابع skewX()  

متد skewX() یک المان را در امتداد محور X بر حسب واحد deg می چرخاند.

نمونه ی زیر المان <div> را در امتداد محور X به اندازه ی ۲۰ درجه می چرخاند:

تابع skewY()

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

مثال زیر عنصر <div> را به اندازه ی ۲۰ درجه در امتداد محور Y می چرخاند:  

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

متد matrix()

متد matrix() کلیه ی متدهای تبدیل دو بعدی را در یک تابع واحد می گنجاند (ادغام می کند).

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

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

خاصیت / Property

شرح 

transform

وضعیت نمایش المان را به دو بعدی یا سه بعدی تبدیل می کند

transform-origin

اجازه می دهد موقعیت المان های تبدیل شده (transformed element) را تغییر دهید

 

متدهای تبدیل دوبعدی:    

Function / تابع 

شرح 

matrix(n,n,n,n,n,n)

تبدیل دو بعدی عنصر را با تابع matrix که ۶ مقدار به آن اختصاص داده شده باشد, تعریف می کند

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 (بر اساس مقدار تعیین شده) می چرخاند

 

خاصیت Transform خاصیت Transform خاصیت Transform transform skew

خاصیت Transform

خاصیت Transform خاصیت Transform خاصیت Transform transform scale

خاصیت Transform

آموزش CSS آموزش طراحی وب

دیدگاه خود را بیان کنید