8
تشکر

مقدمه‌ای بر عناصر سه بعدی – بخش سوم

CSS3 - سی اس اس 3

CSS3 – سی اس اس 3

در دو مطلب قبلی که بیشتر شامل مقدمات کار بود با نحوه کار با 3D transform و برخی توابع آن آشنا شدیم. در این مطلب میخواهیم در عمل با این ویژگی CSS3 کار کنیم. در ادامه مطلب همراه ما باشید…

مشاهده دمو

ساختار اولیه

همانطور که در دمو مشاهده کردید ما قصد داریم یک لیست به صورت سه بعدی بسازیم. برای ساخت لیستی که در دمو مشاهده کردید ابتدا یک مکعب مستطیل را در نظر بگیرید. مکعب مستطیل دارای شش وجه است که ما فقط با دو وجه آن نیاز داریم که نام آنها را front و left میگذاریم.

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

برای اینکه درک بهتری داشته باشیم، container را کمی میچرخانیم تا ببینیم دقیقا چه اتفاقی افتاده است. الان مستطیل ما داری دو وجه است که در زیر مشاهده میکنید.


See the Pen 3D List Transform – Step1 by aparnet.ir (@aparnet) on CodePen.

حالا دوباره مستطیل را به حالت اول برمیگردانیم و با استفاده از جی کوئری کاری میکنیم که زمانی که کاربر روی front کلیک کرد، container بچرخد و طرف left را نمایش دهد. برای مثال در اینجا زمانی که کاربر بر روی مستطیل کلیک میکند ما یک کلاس به مستطیل اضافه میکنیم که در آن کلاس با استفاده از توابع transform مستطیل را میچرخانیم. مانند زیر:


See the Pen 3D Transform List – Step2 by aparnet.ir (@aparnet) on CodePen.

الان فقط نیاز داریم چند تا از این مکعب ها را در HTML بسازیم و همچنین کدهای جی کوئری را کمی تغییر میدهیم تا زمانی که کاربر بر روی مستطیلی کلیک میکند مستطیل قبلی که فعال بود به حالت اول برگردد.


See the Pen ocdpq by aparnet.ir (@aparnet) on CodePen.

نکته: اگر iframeها باز نشد، لطفا صفحه را دوباره بارگذاری کنید.

این مطلب از سری مطالب، 3D Transform است
  • Ali Amini می‌گه:

    عالی بود


  • نظرات این مطلب بسته است.