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


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

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

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

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

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

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

کد HTML و CSS تصویر

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

و استایل های CSS

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

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

حتما بخوانید  واترمارک روی عکس با php

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

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

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

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

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

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

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

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



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

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

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

بخش کاربران

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

مجوزهای ما

logo-enamd
logo-samandehi

دانلود کتاب

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