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

- visibility ٢ mode_comment

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

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

روند کلی کار

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

3dcube-plan

 

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

بخش html:

بخش CSS:

info نکته :

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

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

info نکته :

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

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

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

info نکته :

برای چرخش خودکار از روش جاوا اسکریپت کد زیر را در بخش اسکریپت صفحه اضافه کنید:

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

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

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

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

Paria RVN

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

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.