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

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



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

ساخت مکعب با css3

7119 ۱۴ آذر ۹۲

در این آموزش قصد داریم یک مکعب را تنها با استفاده از  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 کار میکنه، پس اگر کروم، سافاری یا تورچ ندارید... راستی! چرا ندارید؟!

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

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

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

  • ‏‏
    رضا ساطع بیدگلی(۱۴ آذر ۱۳۹۲)

    خیلی قشنگ بود

  • ‏‏
    لقمان آوند(۱۴ آذر ۱۳۹۲)

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

  • ‏‏

    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 داشته باشه، میچرخه و وجه اولش مخفی میشه بهتره که به خود مکعب لینک داد

  • ‏‏
    حسین محمدی(۱۵ آذر ۱۳۹۲)

    خیلی ممنون

  • ‏‏
    کیوان علی محمدی(۱۵ آذر ۱۳۹۲)

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

  • ‏‏

    زیبا بود

  • ‏‏
    danial.md5(۱۶ آذر ۱۳۹۲)

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

    • ‏‏
      مهشاد کلانتری(۱۶ آذر ۱۳۹۲)

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

      • ‏‏
        danial.md5(۱۷ آذر ۱۳۹۲)

        به سون لرن

        • ‏‏
          کیوان علی محمدی(۱۷ آذر ۱۳۹۲)

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

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram