CSS3 3D Transform | قسمت سوم: کار با محور Z و ساخت مکعب

- visibility ٠ mode_comment

به نام خدا

با سلام خدمت دوستان سون‌لرنی عزیز.

در این قسمت از سری آموزشی CSS3 3D Transform میخواهیم بیشتر با محور Z کار کنیم. معمولا برای درک بهتر محور Z و کار با آن، ساخت مکعب پیشنهاد میشود و ما هم در این قسمت میخواهیم مکعب مربع و مکعب مستطیل بسازیم.

ساخت مکعب

همونطور که میدونید یک مکعب مربع شش ضلع دارد. بنابراین باید برای ایجاد این شش ضلع، 6 عنصر ایجاد کنیم.

کد HTML:

استایل اصلی:

استایل بالا نکته ی خاصی نداره. و حالا نوبت پیاده سازیه اضلاع مکعب رسیده.

همونطور که در کدهای بالا دیدید، زوایای قرار گیری هر ضلع را مشخص کردیم و هر ضلع را در محور Z صد پیکسل به جلو حرکت دادیم. چرا 100 پیکسل؟ اگر دقت کرده باشید عرض و طول هر ضلع 200 پیکسل هست؛ بنابراین فاصله ی درونی هر ضلع تا ضلع روبه رویش نصف، یعنی 100 پیکسل میشود.

حالا یک مکعب با سایز بزرگتر میسازیم.

 

و حالا مشخص کردن زوایای قرار گیری:

 

 

حالا بیایید یک مکعب مستطیل بسازیم.(در زیر تنها کدهای تغییر یافته قرار گرفته اند)

و حالا استایل قرارگیری اضلاع در کنار هم.

info نکته :

متد rotateX عناصر را از لبه ی سمت راست آنها و متد rotateY عناصر را از لبه ی بالایی آنها میچرخاند.

تنها تغییر، استایل ضلع سمت راستی بود. شاید براتون سوال پیش بیاد که چرا ضلع سمت راست 300 پیکسل و ضلع سمت چپ 100 پیکسل در محور Z حرکت کردند؛ جواب: عرض ضلع سمت راست 100 پیکسل است و برای اینکه به سمت راست برود،(عرض مکعب 400 پیکسل می باشد) 90 درجه از لبه ی سمت راست خود میچرخد؛ بنابراین 300 پیکسل باید در محور Z حرکت کند تا در سمت راست مکعب قرار بگیرد ولی ضلع سمت چپ تنها 100 پیکسل از سمت راست مکعب فاصله دارد.

امیدوارم این سه مثال مفید واقع شده باشه. فایل های پیوست شده رو میتونید از لینک زیر دانلود کنید.

موفق باشید.

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

نیاز به لاگین

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