قالب وردپرس قالب وردپرس آموزش وردپرس قالب فروشگاهی وردپرس وردپرس
پنج شنبه , تیر ۲۷ ۱۳۹۸
خانه / طراحی سایت / css / متحرک سازی و چرخش (Rotate) در CSS3
آموزش متحرک سازی عناصر در CSS

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

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

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

 

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

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

 

درباره ی پریا جعفری

مطلب پیشنهادی

افزونه WordPress By Yoast Seo (قسمت دوم)

افزونه WordPress By Yoast Seo (قسمت دوم) در بخش قبل گزینه های دیگر این افزونه …

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *