ساخت مکعب با css3

- visibility ١٣ mode_comment

در این آموزش قصد داریم یک مکعب را تنها با استفاده از  css و css3 بسازیم. قبل از شروع، نتیجه نهایی این آموزش را می توانید از طریق لینک زیر مشاهده کنید.

مشاهده دمو

در ابتدا تنها آدرس سایت سون لرن مشاهده میشه اما وقتی کاربر ماوس را روی آدرس سایت بیاورد، مکعب چرخیده و معرفی کوتاهی از سایت مشخص میشه. پیشنهاد میکنم خودتون چرخش مکعب را ببینید، جالبه!

اول کدهای html لازم:

و سپس کدهای css:

این مکعب از دو وجه ساخته شده (در اینجا منظور divهایی با کلاس های .flip و .flop می باشد) که توسط خاصیت transform در محل مناسب قرار گرفتند. مکعب با استفاده از مقدار preserve-3d برای خاصیت transform-style به صورت سه بعدی در آمده و البته این خاصیت روی مرورگر های webkit به خوبی کار میکنه. خاصیت perspective هم فضای دید سه بعدی را فراهم می کند.

div با کلاس .flop را در راستای محور X به میزان -88 درجه چرخانده و در راستای محور Zها به اندازه -55px جا به جا می کنیم تا المان ما در ابتدای باز شدن صفحه دیده نشه. سپس زمانیکه .cube رویداد hover داشته باشه در فضای سه بعدی و در راستای محور X به میزان 90 درجه میچرخه که این چرخش هم توسط یکی از خاصیت های css3 به نام transition به صورت انیمیشن در میاد و درنهایت باعث میشه div با کلاس .flop مشخص بشه.

مکعبی که امروز با هم ساختیم روی مرورگرهای webkit کار میکنه، پس اگر کروم، سافاری یا تورچ ندارید... راستی! چرا ندارید؟!

دانلود فایل های آموزش

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

خیلی قشنگ بود

لقمان آوند

خیلی جالب بود .
اینجور مطالب جذابیت CSS3 رو بیشتر نشون میده !

ممنون

koohyar

kheili jaleb khanum mohaandes,,, rasti nemishe tuie har vajhesh ye buttun gozasht ke az cube haa be onvane buttun haie page estefade beshe?!
akhe tuie in halaat faghat khasiaate namayeshi dare va bas!

چرا میشه، ولی به خاطر اینکه وقتی مکعب رویداد hover داشته باشه، میچرخه و وجه اولش مخفی میشه بهتره که به خود مکعب لینک داد

حسین محمدی

خیلی ممنون

ممنون خانوم کلانتری عالی بود.

خواهش میکنم لطف دارین

abtin148

زیبا بود

یک سوال چطوری می تونم مطلبی رو بفرستم

مطلب رو کجا میخواید بفرستید؟

danial.md5

به سون لرن

کیوان علی محمدی

سلام اگر صرفا میخواید مطالبتون رو در سایت درج کنید به ایمیل avand.loghman@gmail.com یا keivan.amohamadi@gmail.com بفرستید،اما اگر میخواید به عنوان نویسنده فعالیت کنید مشخصات کامل + سابقه نویسندگی در سایت یا وبلاگ درباره موضوعات طراحی وب و برنامه نویسی + مهارت ها و تخصص هاتون رو به avand.loghman@gmail.com بفرستید تا بعد از بررسی و در صورت امکان همکاری به عنوان نویسنده فعالیت کنید.موفق باشید

نیاز به لاگین

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