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

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

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

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

پریا جعفری

برچسب ها

css3 html rotate اموزش متحرک سازی عناصر در css3 تصویر متحرک زرین هور متحرک سازی در css

نظر دادن با استفاده از وردپرس
نظر دادن با استفاده از فیسبوک

دیدگاهتان را بنویسید لغو پاسخ

call of duty

پابجی یا کالاف؟

1 هفته پیش

156

بازی کالاف آو دیوتی و پابجی دو بازی بتل رویال هستند با گرافیک بسیار عالی در ps و گوشی های موبایل با بیش از 2 میلیون بازیکن که هم اکنون سرگرمی بیشتر گیم پلیرها است. این مقایسه برای پیدا کردن...