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

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



  آیا می دانید تا کنون 6336 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

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

0 1940 ۱۸ شهریور ۹۳

به نام خدا

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

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

ساخت مکعب


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

کد HTML:

استایل اصلی:

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

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

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

 

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

 

 

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

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

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

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

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

موفق باشید.

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

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram