• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

ساخت جعبه یا مکعب 3 بعدی با استفاده از CSS3

2 6003 ۱۳ فروردین ۹۳

با نام و یاد خدا و سلام خدمت شما دوستان و همراهان سون لرن

در این پست آموزشی که فایل ویدئوییش رو براتون آماده کردم میخوایم با هم یه مکعب رو بوسیله CSS3 و فضای سه بعدی اون ایجاد کنیم. بخش html تو این آموزش کاملا راحته و ما روی بخش CSS به خصوص CSS3 که امکان عملکرد در فضای سه بعدی رو به ما میده تمرکز می کنیم. سعی کردم کمی مفهومی هم کار بشه ولی با توجه به حجم ویدئوی آموزشی شاید تو رسوندن برخی مفاهیم کاستی ایجاد شده باشه که خواهید بخشید. نکته ای که اینجا مهمه اینه که دوستان حتماً به پشتیبانی مرورگرها از این ویژگی ها دقت داشته باشن تا با مشکل رو به رو نشن.

روند کلی کار

به تصویر زیر نگاه کنید:

3dcube-plan

 

فرض کنید صفحه مربع آبی تو شکل 1 یه کاغذ مربعی شکله. خب همونطوری که شما میتونین طبق تصاویر با 6 قطعه از این کاغذ مربعی و با چیدن اون ها در زوایای مختلف مکعب شکل 4 رو بسازید، در CSS و html هم به همین صورته که شما با 6 قطعه مربع که میتونه تصویر باشه div باشه یا هر چیز دیگه ای این مکعب رو ایجاد کنید و آخر هم مکعب کلی رو بوسیله ویژگی های CSS3 در زوایای مختلف برچرخونید. کار اصلی رو میتونید از ویدئوی آموزشی مشاهده کنید.

بخش html:

بخش CSS:

نکته : تمام توضیحات مربوط به کد رو داخل فایل ویدئویی مشاهده کنید.

با عرض معذرت در فایل ویدئویی زاویه های چرخش مکعب بالعکس گفته شد که در فایل پروژه و کدهای بالا این اشتباه تصحیح شد.  به این ترتیب که در فایل ویدئویی هر زاویه ی 90 درجه ای که دیدین اگه منفی بود مثبت و اگه مثبت بود منفیش کنید. بنابراین خواهید بخشید.

نکته : حتما به پشتیبانی مرورگر ها از خصوصیات مورد استفاده اطمینان حاصل کنید. من پروژه رو روی گوگل کروم انجام دادم و تست کردم. پس اگه روی مرورگرهای دیگه کار نکرد اول به پیشوند های CSS3 و بعد به پشتیبانی اون مرورگر از خصوصیت css3 توجه کنید.

بعد از خوندن نکات فوق می تونید آموزش ویدیویی رو از زیر ببینید :

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

برای مشاهده اطلاعات بیشتر در مورد "پرسپکتیو" اینجا کلیک کنید.

موفق باشید...

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 2 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏

    ممنون
    خیلی جالب و مفید بود

  • ‏‏

    جالب بود ، ممنون.

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram