جهت ورود به تالار گفتمان سایت کلیک کنید

هاست ارزان به همراه یک آفر ویژه

هاست ارزان حرفه ای با کیفیت بالا و محسوس
هاست پر سرعت SSD بر روی سرور های ابری و سیستم عامل کلاد لینوکس
مناسب با سیستم وردپرس و سایر مدیریت های محتوا
SSL رایگان همراه با بکاپ روزانه R1soft
دامین اضافه ی نامحدود به همراه پهنای باند و امکانات نامحدود
قابلیت انتخاب نسخه ی php ، کنترل پنل cpanel
قیمت ها به صورت سالانه و ارزان در نظر گرفته شده اند

آفر ویژه : 200 قالب وردپرس به همراه هاست 5 گیگ حرفه ای تنها 55 هزار تومان

چرخش سه بعدی تصاویر وب سایت به همراه سایه – 3D Image Flip

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

درخواست های زیادی داشتم مبنی بر آموزش این افکت از html و css3 که اتفاقا در حال حاضر بسیار هم در بین وب سایت های ایرانی و خارجی مد شده و از آن بسیار استفاده میشود.

شرح کار این افکت به این صورت میباشد که کاربر بعد از بردن ماوس بر روی یک تصویر , تصویر 180 درجه چرخیده و نوشته ی پشت آن نمایان میشود .

آموزش های بسیار زیادی در تمامی وب سایت ها موجود می باشد که بیشتر آنها دارای نقص می باشد . اما این آموزش که در ادامه برای شما عزیزان قرار خواهم داد , ٪100 تست شده و بهینه شده برای تمامی مرورگر های جدید می باشد .

جالب تر این است که برای این افکت , سایه زیرین هم در نظر گرفته شده که زیبایی دو چندانی به آن بخشیده …

چرخش سه بعدی تصاویر وب سایت به همراه سایه - 3D Image Flip

و اما آموزش : 

برای این کار در ابتدا شما باید کد زیر را در html خود قرار دهید :

و سپس کد های زیر را در css خود قرار دهید :

نکته ۱ : در css بالا هر جا width:200px و height:200px مشاهده کردید , باید آن را به اندازه عکسی که خودتان استفاده میکنید , تغییر دهید . ( این انداره که هم اکنون قرار داده شده , برای عکس پیشفرض می باشد )

نکته ۲ :‌ اگر نیازی به سایه ندارید , کافیست در css بالا , قسمت بین Start Shadow و End Shadow را حذف نمایید .

نکته ۳ :‌ کاملا مشخص است که در صورت آشنایی کامل با css , شما میتوانید با تغییرات اساسی در کد های بالا , کد خود را شخصی سازی کنید .

دموی آماده افکت

دانلود فایل آماده دموی افکت

پخش اختصاصی

گرداوری و آموزش : وحید مجیدی

جهت تبادل گفتگو و حل مشکلات در باره این موضوع , کلیک کنید

7 پاسخ به “چرخش سه بعدی تصاویر وب سایت به همراه سایه – 3D Image Flip”

  1. امیر گفت:

    سلام
    ممنونم از کد بسیار کاربردی تون
    یک سوال اگر همینو بخواهیم اول متن باشه و بعد عکس بیاد یعنی برعکسه این چطور میشه کدش؟
    میشه کدش رو بگید ؟

    • وحید مجیدی صدر گفت:

      دوست عزیزم تغییرات زیادی باید توی css انجام بشه . متاسفانه فعلا نمیتونم کمکتون کنم

  2. tablokar گفت:

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

    آموزش شیر پوینت

    با سپاس فراوان

  3. http://www.alexachat.ir/ گفت:

    واقعا سایت عالی و خوبی بود از نظر محتوا سایت شما رو ما لینک کرده ایم و لذت برده ایم

  4. M گفت:

    مرسی

  5. کاظمی گفت:

    عاااااااااااااااااالی بود عااااااااااااالی

    ممنون

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

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