خب !! در این جلسه از آموزش، قصد داریم روش چرخاندن تصاویر و یا هر اِلمان دیگری را با استفاده از دستورات css و بدون بکارگیری هیچکدام از دستورات جی کوئری به شما عزیزان آموزش دهیم.(توصیه می شود دوره آموزشی طراحی سایت و پکیج آموزش طراحی سایت را مشاهده کنید)
برای شروع طبق روال همیشه احتیاج به کد HTML داریم. به کد دستوری زیر توجه کنید:
|
1 2 3 4 |
<div class="example"> آموزش چرخاندن تصاویر با دستورات css <a href="#"><img src="my-image.png" /></a> </div> |
در اینجا کلاس example را برای div خود انتخاب کردیم تا در استایل دهی راحت باشیم. عکس مورد نظر خود را هم درون یک تگ a قرار دادیم.
خب … کد HTML ما آمادست و حالا نوبت به آن رسیده که با دستورات CSS افکتی را برای عکس خود ایجاد کنیم تا در صورتی که ماوس بر روی آن قرار گرفت تصویر ما بچرخد.به همین منظور از کد دستوری زیر استفاده می کنیم:
|
1 2 3 4 5 6 7 8 9 10 11 |
.example a img:hover { -moz-transform:rotate(90deg) ; -webkit-transform:rotate(90deg) ; -o-transform:rotate(90deg) ; -ms-transform:rotate(90deg) ; transform:rotate(90deg); } |
آموزش پیشنهادی برای شما : آموزش کامل CSS و CSS3
به همین راحتی با چند خط دستور css تونستیم برای عکس این ویژگی را اعمال کنیم تا با رفتن ماوس بر روی آن، بچرخد.
لازم به ذکر است که شما می توانید با تعیین درجه دلخواه درون پرانتز جلوی rotate، تصویر یا اِلمان مورد نظر را به میزان دلخواه بچرخانید. ما در مثال بالا چرخش ۹۰ درجه را اعمال کردیم.
همانطور که ملاحظه می کنید سرعت چرخش بسیار بالاست و به محض قرارگیری ماوس بر روی تصویر، به سرعت می چرخد.
این حالت از نظر کاربر جلوه خوبی ندارد و تاثیر منفی ای بر روی او ایجاد می کند. در اینجا می توانیم با کم کردن سرعت ( تاخیر انداختن سرعت چرخش کامل ) این مشکل را برطرف نماییم.به دستور css زیر توجه نمایید:
|
1 2 3 4 5 6 7 8 9 10 |
.example a img { -moz-transition: all 1s linear; -webkit-transition: all 1s linear; -o-transition: all 1s linear; -ms-transition: all 1s linear; transition: all 1s linear; } |
در اینجا ما تعریف کردیم که تصویر مورد نظر، هر تغییر حالتی را در مدت زمان ۱ ثانیه انجام دهد. شما می توانید زمان را با توجه به نظر و سلیقه خود تغییر دهید.
لازم به ذکر است که تمامی ورژن های مرورگرها، دستورات transform و transition را اجرا نمی کنند. به همین علت لازم است تا دستورات –moz- ، – webkit- ، -o- و –ms را بکارگیری کنیم تا در تمامی مرورگرها قابل اجرا باشند.
این آموزش هم به پایان رسید… امیدوارم که استفاده لازم رو برده باشید.
