استفاده از transform در css3

با استفاده از ویژگی trandform  در css3 می توانیم به عناصر را در صفحات وب سایت انیمیشن های زیبایی دهیم.

در این ویژگی عناصر می توانند به صورت 2 بعدی بر روی دو محور  (X , Y) و سه بعدی بر روی سه محور (X,Y,Z) ، به نمایش در بیایند. محور Y نمایش بر روی محور عمودی و محور X نمایش بر روی محور افقی است. با استفاده از تابع rotate  در transform  می توانیم عناصر ، متن و یا عکس را در صفحات نمایش بچرخانیم. با درجه به آن می دهیم rotate  را می توان از 0 تا 360 درجه چرخاند . با استفاده از تابع skew  می توانیم عناصر را در صفحه به صورت کج و یا مورب در آوریم . با استفاده از تابع translate  می توانیم عناصر را در فضای دو بعدی جا به جا کنیم . با استفاده از  تابع  scale   می توانیم عناصر را در صفحات وب کوچک و بزرگ کنیم.  توابع دو بعدی در دستور transform به صورت زیر نمایش داده می شود

translate(X,Y)

(X)translate

(Y)translate

(X,Y)rotate

(X)rotate

(Y)rotate

(X,Y)scale

(X)scale

(Y)scale

(X,Y)skew

(X)skew

  (Y)skew

در ویدئوی آموزشی در ادامه آپلود شده است، با مثال نحوه استفاده transform  با استفاده از kayfram  ها در css3 نمایش داده شده است