انیمیشن در طراحی وب
723 روز پیش
پويا صادقى , آموزش CSS
کد های اختصاصی و غیر اختصاصی تغییر حالت المنت ها در CSS3
چرخش
با این ویژگی میتونید هر المنتی رو تا 360 درجه (و حتی بیشتر!) بچرخونید!
در مرورگرهای مبتنی بر وبکیت و گکو (گوگل کروم/ فایرفاکس/ سافاری ) پشتیبانی میشه.
-webkit-transform: rotate(15deg); -moz-transform: rotate(15deg); transform: rotate(15deg);
scale به راحتی اندازه طول و عرض اجزای صفحه رو تغییر بدید:
-webkit-transform: scale(1.25, 0.5); -moz-transform: scale(1.25, 0.5); transform: scale(1.25, 0.5);
skew
این یکی فقط برای وبکیت (گوگل کروم و اپل سافاری)
برای تغییر زاویه های المنت ها:
-webkit-transform:skew(-300deg);
جابجایی عناصر
برای وبکیت:
-webkit-transform: translate(-50px,30px);
*از این خاصیت ها میتونید همزمان استفاده کنید.مثل:
-webkit-transform: rotate(15deg) scale(1.25, 0.5); -moz-transform: rotate(15deg) scale(1.25, 0.5); transform: rotate(15deg) scale(1.25, 0.5);
خوب! حالا کد های transform رو میتونیم برای حرکت موس تنظیم کنیم و در اینجا به یکی از کد های ارائه شده در CSS2 احتیاج داریم:
hover
همونطور که برای لینک ها به صورت: a:hover خواصی رو( برای وقتی که موس بر روی لینک حرکت می کند) قرار میدهیم ،
در CSS از hover برای هر المنتی میشه استفاده کرد و دیگه نیازی به جاوااسکریپت (onmouseover) نیست
#div1:hover{background-color:#0000FF;}
به این کد توجه کنید:
#div1{
width:200px; height:200px;
background-color:#00FFFF;}
#div1:hover{
background-color:#FF6600;
-webkit-transform: scale(2);}
در کد بالا div1 که طول و عرض 200 پیکسلی و بکگراند آبی داره، با حرکت موس بکگراندش نارنجی میشه و سایزش هم دوبرابر میشه.
و از کد :
-webkit-transition: all 1s ease-in-out;
هم می تونید برای ایجاد حالت انیمیشن در هنگام hover استفاده کنید:
#div1{
width:200px; height:200px;
background-color:#00FFFF;
-webkit-transition: all 1.5s ease-in-out;}
#div1:hover{
background-color:#FF6600;
-webkit-transform: rotate(360deg) scale(2);}
در کد بالا div1 که طول و عرض 200 پیکسلی و بکگراند آبی داره، با حرکت موس ، در زمان 1.5 ثانیه، 360 درجه میچرخه و بکگراندش نارنجی میشه و سایزش هم دوبرابر میشه.
