استفاده از 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 نمایش داده شده است