متحرک سازی و چرخش (Rotate) در CSS3
متحرک سازی و استفاده از عناصر قابل حرکت در صفحات وب، باعث جذابتر و پویاتر شدن سایتها میشود
و باعث میشود کاربران وبگردی متفاوتی را تجربه کنند. متحرک سازی در گذشته
یا از طریق تصاویر GIF و یا از طریق فایلهای فلش SWF ممکن بود و به دلیل اینکه بسیاری
از فایلهای متحرک حجم زیادی داشتند، موجب کاهش سرعت بارگذاری صفحات وب و تجربه ی
ناخوشایند وبگردی میشدند.
با ورود css3 تا حدود زیادی مشکل انیمیشن و حرکت عناصر در صفحات وب برطرف گردید
و با فراگیر شدن پشتیبانی مرورگرهای جدید از این خاصیت، در حال حاضر میتوانید با کمترین
افت سرعت، از انیمیشنها در سایت استفاده کنید.
خاصیت transform – متد rotate :
یکی از خصوصیات جدیدی که در Css3 شاهد آن هستیم، Transform نام دارد.
این خصوصیت میتواند امکانات زیر را در اختیار شما قرار دهد:
- Rotate یا چرخش عناصر در صفحه
- Skew یا مورب سازی عناصر در صفحه
- Translate یا بازگرداندن عناصر در صفحه
- Scale یا تغییر اندازه عناصر در صفحه
به وسیله متد rotate خاصیت transform ، می توانید عنصر مورد نظر خود را در جهت عقربه ساعت
و یا خلاف آن بر حسب یک درجه تعیین شده ، بچرخانید .
برای این منظور باید میزان درجه ای که می خواهید عنصر مورد نظر خود را بچرخانید ،
در پرانتز مقابل متد rotate بر حسب واحد deg تعیین کنید .
چنانچه مقدار تعیین شده مثبت باشد ، عنصر به آن میزان در جهت عقربه های ساعت
و چنانچه منفی باشد در خلاف عقربه ساعت چرخانده خواهد شد .
این افکت یکی از قابلیت های منحصر به فرد در CSS 3 است که تنها با نوشتن یک قطعه کد
ساده امکانپذیر است .
شکل کلی استفاده از این خاصیت به صورت زیر است :
;(transform : rotate ( deg
;( transform : rotate ( 90deg
ساختار HTML
در کدHTML زیر یک نمونه ساده را بررسی کرده ایم که برگ سبک دهی
را داخلی تعریف کرده ایم که div ی که کد css مربوط به حرکت و چرخش
را برای آن تعریف کرده ایم ابتدا div مربوطه ۳۶۰ درجه می چرخد و ۵ ثانیه طول میکشد.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<style >
.myelement2 { display:block;
width: 200px;
height:200px;
background: #f00;
margin: 100px auto;
transition: ease-out 1s;
-webkit-transition: ease-out 1s;}
.myelement2:hover {background:#f00;
transform: rotate(360deg);
-webkit-transform: rotate(720deg);
transition: ease-out .5s;
-webkit-transition: ease-out .5s;
color: #ffd800;}
</style>
<title>چرخش تصویر</title>
</head>
<body>
<form id="form1" runat="server">
<div class ="myelement2">
<h4 >zarrinhoors</h4>
</div>
</form>
</body>
</html>
افزودن حالت انیمیشن به چرخش عنصر در صفحه
مشخصه ی transform میتواند باعث چرخش عناصر در صفحه شود ولی برای
افزودن حالت انیمیشن، باید از مشخصه ی transition نیز استفاده کنید تا جلوه ی زیباتری ایجاد کنید.
از transition برای ایجاد یک افکت transition باید دو چیز را مشخص کرد:
- خاصیت CSS که می خواهید انتقال در ازای تغییر آن انجام شود.
- مدت زمان انجام انتقال
مقدارهایی که برای خاصیت transition میتوانیم تعریف کنیم:
| مقدار linear | انیمشن از ابتدا تا انتها با سرعت یکسان حرکت میکند |
| Ease | مقدار پیش فرض این خاصیت هست .انیمشن با سرعت نسبتا
کم شروع میشود و سریع سرعتش افزایش پیدا میکند و وقتی به انتهامیرسد دوباره سرعتش کم میشود |
| Ease-in | انیمشن با سرعت کم شروع میشه وبا سرعت زیاد به اتمام میرسه |
| Ease-out | انیمشن با سرعت زیاد شروع میشود وبا سرعت کم به اتمام میرسد.
|
| Ease-in-out | انیمشن با سرعت کم شروع میشود و بین انیمشن مقدارکمی
سرعت افزایش پیدا میکند و باسرعت کم به اتمام میرسد |
خصوصیت transition-delay: این خاصیت مکثی رو قبل از شروع افکتتعیین
میکند مثلا ۲ ثانیه میگذرد و بعد افکت اجرا میشود.نحوه استفاده
نکته:در صورتیکه هیچ زمانی تنظیم نشود افکتی رخ نخواهد داد،
چون زمان پیش فرض ۰(صفر) ثانیه است.
