افکت Flip عکس با جی کوئری


افکت Flip عکس با جی کوئری

در این آموزش jQuery , قصد داریم به شما نحوه ایجاد افکت Flip عکس با جی کوئری و CSS را نمایش بدیم. در آموزش های قبلی نحوه ایجاد چرخش عکس با jQuery را دیدیم.

افکت Flip عکس همان قرینه کردن یک تصویر است بصورتی که چپ و راست آن تغییر می کند و یک حالت همانند نگاه کردن به تصویر از طریق آینه بوجود می آید.

در این مثال, ما تصویر را با استفاده از  ۳D transform در جهت افقی قرینه می کنیم. ما از خاصیت transform در CSS برای قرینه کردن عکس در جهت محورX بهره می بریم.

این خاصیت CSS توسط jQuery اعمال می شود.

افکت Flip عکس با جی کوئری

کد HTML و CSS تصویر

این کد به شما یک تصویر و دکمه برای قرینه کردن تصویر را نمایش می دهد.

و استایل های CSS

کد افکت Flip عکس با جی کوئری

اسکریپت jQuery زیر به شما نحوه تغییر خاصیت transform یا همان چرخش را همگام با رویداد click را نشان می دهد. با تغییر ویژگی transform تصویر قرینه شده و بعد از آن تصویر بعدی نمایش داده می شود.

حتما بخوانید  اعتبارسنجی فرم با jQuery برای جلوگیری از ارسال چند URL

امیدوارم از آموزش افکت Flip عکس با جی کوئری نهایت استفاده را برده باشید .

برای دانلود سورس کد کامل این آموزش از باکس دانلود استفاده کنید.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق و پیروز باشید.

حسن شفیعی
مدرس ، پنتستر ، توسعه دهنده اپلیکیشن های تحت وب ، عضو مرکز حامی نخبگان و از مدیران و اعضای رسمی تیم امنیتی آشیانه هستم . علاقه خاصی به زبان php و امنیت شبکه و لینوکس دارم و هر روز تلاش می کنم به این حوزه ها مسلط تر شوم و اطلاعاتم را در وب به اشتراک بگذارم

دیدگاه کاربران

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

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

جدیدترین آموزش های آنلاین



دانلود رایگان (هدیه ویژه)

کتاب آموزش زبان برنامه نویسی PHP را دانلود و همین امروز یادگیری را شروع کن و به جمع برنامه نویسان ملحق شو ;)

دانلود رایگان کتاب

مجوزهای ما

logo-samandehi

نظر کاربران عزیز

متاسفیم, در حال حاضر امکان ثبت نظر وجود ندارد.

بخش کاربران

هنوز عضو نیستید ؟ کلیک کنید

دانلود کتاب

عضویت در خبرنامه