متحرک سازی و چرخش (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: این خاصیت مکثی رو قبل از شروع افکتتعیین
میکند مثلا ۲ ثانیه میگذرد و بعد افکت اجرا میشود.نحوه استفاده
نکته:در صورتیکه هیچ زمانی تنظیم نشود افکتی رخ نخواهد داد،
چون زمان پیش فرض ۰(صفر) ثانیه است.
پریا جعفری
دیدگاهتان را بنویسید
آموزش ۲۵ ترفند نایاب ویندوز ۱۰!! (پارت دوم)
ادامۀ پارت اول ترفند های ویندوز 13- با Focus Assist مدیریت دقیقی روی نحوه نمایش اعلان‌ها را اعمال کنید ویژگی Focus Assist پیش از این به نام Quiet Hours شناخته می شد. این ویژگی در به روز رسانی آوریل 2018 باز...
آموزش ۲۵ ترفند نایاب ویندوز ۱۰!! (پارت اول)
جلوگیری از هک ایمیل و پسورد!
