متحرک سازی و چرخش (Rotate) در CSS3

متحرک سازی و چرخش (Rotate) در CSS3

0 325

متحرک سازی و چرخش (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: این خاصیت مکثی رو قبل از شروع افکتتعیین

میکند مثلا ۲ ثانیه میگذرد و بعد افکت اجرا میشود.نحوه استفاده

 

نکته:در صورتیکه هیچ زمانی تنظیم نشود افکتی رخ نخواهد داد،

چون زمان پیش فرض ۰(صفر) ثانیه است.

 

شما همچنین ممکن است مانند بیشتر از نویسنده

ترک یک پاسخ

آدرس ایمیل شما منتشر نخواهد شد.