متحرک سازی سند html با css
در css3 برای متحرک سازی عناصر دو راه کلی وجود دارد استفاده از css animation و استفاده از transition و رویداد ها برای انجام هر یک از این دو حالت برای ایجاد انواع افکت های مختلف می توانیم از transform ها استفاده کنیم.
آنچه در این مقاله می خوانید ...
ایجاد افکت ها با transform
با استفاده از transform ها قادر خواهید بود در شکل یا موقعیت عناصر مورد نظر تغییراتی را اعمال کنید. این تغییرات می توانند به صورت دو بعدی و سه بعدی باشند. با دو ویژگی می توان از transform ها به صورت دو بعدی استفاده نمود :
- transform: none|transform-functions|initial|inherit;
- transform-origin: x-axis y-axis z-axis|initial|inherit;
در ادامه با برخی از مقادیر transform دوبعدی آشنا خواهیم شد.
توابع transform | توضیحات |
---|---|
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 دارد |
skewY(angle) | یک تبدیل دو بعدی در طول محور Y دارد |
matrix(n,n,n,n,n,n) | یک تبدیل دوبعدی را با استفاده از یک ماتریس 6 مقداری تعریف می کند |
همچنین تمام موارد فوق می توانند به صورت سه بعدی نیز استفاده شوند .
()translate
با استفاده از ویژگی ()translate می توانید المان مورد نظر را در جهت سه محور X Y Z به حرکت در آورید.
- .classname{
- transform:translateX(10px);
- transform:translateY(30px);
- transform:translateZ(15px);
- }
هم چنین می توانیم این سه مقدار را در یک عبارت به صورت زیر خلاصه کنیم.
- transform:translate3d(10px,30px,15px);
()scale
با استفاده از ویژگی ()scale می توان عنصر مورد نظر را در راستای سه محور X Y Z بزرگ نمایی کرد.
- .classname{
- transform:scaleX(2);
- transform:scaleY(1.5);
- transform:scaleZ(3);
- }
همچنین می توان سه مقدار بالا را به صورت زیر خلاصه کرد.
- transform:scale3d(2,1.5,3);
()rotate
با استفاده از ()rotate می توان عنصر مورد نظر را به دور سه محور X Y Z دوران دارد. برای این کار می توان از سه واحد deg rad turne استفاده کرد که turne برابر یک دور کامل در جهت عقربه های ساعت ، rad برابر یک رادیان , deg برابر یک درجه می باشد.
- .classname{
- transform:rotateX(20deg);
- transform:rotateY(15deg);
- transform:rotateZ(90deg);
- }
همچنین می توان سه مقدار بالا را به صورت زیر خلاصه کرد.
- transform:rotate3d(20,15,90,deg);
()skewX و ()skewY
با استفاده از این دو ویژگی شما قادر خواهید بود یک عنصر را بر مبنای بردار X یا Y به صورت کج یا مورب در آورید. برای این کار می توان از سه واحد deg rad turne استفاده کرد.
- .classname{
- transform:skewX(15deg);
- transform:skewY(110deg);
- }
توجه مرورگر های chrom و mozila و opera به ترتیب با سه پیشوند -webkit- و -moz- و -o- از transform پشتیبانی می کنند.
حال که با انواع transform آشنا شدید نوبت به فرا گیری transition رسیده است :
transition
با استفاده از transition قادر هستید تا آهنگ انجام تغییرات در یک عنصر را مدیریت کنید. transition را می توان به صورت زیر برای عنصر مورد نظر تعریف کرد.
- transition: property duration timing-function delay|initial|inherit;
property این عبارت تایین می کند که آهنگ انجام تغییرات روی کدام style عنصر مورد نظر اعمال شود.
duration تایین کننده مدت زمانی است که انجام تغییرات طول می کشد.
timing-function که تایین کننده تابع سرعت انجام تغییرات است. و شامل مقادیر linear ease ease-in ease-out ease-in-out می باشد.
delay مشخص می کند که انجام تغیرات چند ثانیه بعد از بارگیری صفحه آغاز شود.
توجه حال می توانیم با استفاده از دو ویژگی transition و transform در کنار هم به سادگی المان مورد نظر را متحرک کنیم. و به آن ها افکت های زیبایی القا کنیم.
برای متحرک سازی با استفاده از transition شما نیاز دارید تا با رویداد ها در html css و JS آشنایی داشته باشید. اما اگر تنها با css می خواهید یک افکت به عناصر خود بدهید با آموزش بعدی ما یعنی animation در css همراه باشید.
1398/04/09
3173 بار
بسیار زیبا