14
تشکر

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

CSS3 - سی اس اس 3

CSS3 – سی اس اس 3

CSS3 درهای جدیدی را به روی طراحان وب باز کرده است. یکی از خصوصیت های پرطرفدار و مهم اضافه شده در CSS3 خاصیت transform است. ممکن است شما با این خاصیت کار کرده باشید. برای مثال از توابعی مانند rotate، scale، translate  و … استفاده کرده باشید. اما ما در این سلسله از جلسات سراغ بخش سه بعدی transform میرویم.

منبع

با ما همراه باشید…

نکته: در این آموزش فقط ما کد استاندارد CSS3 را میگذاریم و از گذاشتن پیشوند مخصوص مرورگرهای مختلف خودداری میکنیم.

اگر با نرم افزارهای سه بعدی مانند 3d max و نرم افزارهای مشابه کار کرده باشید، میدانید که یک نمای دید به نام perspective وجود دارد که در این نما میتوانیم اشیا را به صورت سه بعدی ببینیم. ما به این نما برای ساخت فضای سه بعدی نیاز داریم. یعنی برای اینکه یک فضای سه بعدی درست کنیم ابتدا باید به آن perspective بدهیم.

اینکار را میتوان با دو روش انجام داد. استفاده از خاصیت transfrom و تابع perspective:

transform: perspective( 600px );

روش دوم استفاده از خاصیت perspective:

perspective: 600px;
3D Transform

3D Transform

 

مشاهده مثال 1 در استفاده از perspective

 

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

3D Transform

3D Transform

 

مشاهده مثال 2 در استفاده از perspective

 

در مثال بالا مشاهده میکنید که باکس های قرمز رنگ هر کدام به صورت جداگانه در یک فضای سه بعدی قرار دارند اما باکس های آبی رنگ همگی در یک فضای سه بعدی قرار دارند.

ما در دو مثال بالا یک بار مقدار perspective را 400px و یکبار دیگر 600px در نظر گرفتیم. در واقع این مقدار مشخص کننده فاصله ما از شی سه بعدی است. به عنوان نمونه در مثال زیر مقدار perspective را برای مکعب سه بعدی تغییر دهید و نتیجه را ببینید. (نگران مکعب نباشید در آینده یکی میسازیم!)

3D Transform

3D Transform

 

مشاهده مثال 3 در استفاده از perspective

 

خاصیت دیگری که در این جلسه به آن میپردازیم، خاصیت perspective-origin است. توسط این خاصیت میتوانیم مکان دید را تغییر دهیم. برای درک بیشتر مثال زیر را ببینید.

 

مشاهده مثال در استفاده از perspective-origin

 

منتظر مطالب بعدی باشید.

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

    سلام
    داداش عالی بود فقط لینک دموهایی که گذاشته بودی خراب بود.
    وقت کردی درستشون کن.
    در کل خیلی عالی بود.

  • رها می‌گه:

    سلام و عرض ادب
    خسته نباشید
    یه سوال دارم البته نمیدنم دقیقا زیر کدوم مطلب بنویسم اگر نامربوطه ببخشید
    من میخوام قسمت وسط صفحه رو به شکلی طراحی کنم که هر چقدر مطلب درونش قرار میگیره به همون اندازه کش بیاره اما نمیدنم در تعیین اندازه height رو چطور باید برای قسمتی که میخوام باندازه محتوا کش بیاره تعیین کنم
    مثلا ارتفاع رو auto میدم اما قبول نمیکنه
    و نمیخوام اندازه ثابتی داشته باشه که مثلا 10 خط مطلب نوشتم درونش باندازه 10 خط باشه
    اگر 3 خط مطلب بود باندازه 3 خط باشه
    واقعا لطف میکنید اگر در این باره منو راهنمایی کنید دوست عزیز
    با تشکر و ارزوی توفیق

  • حسین می‌گه:

    سلام برای مقدمه عالی بود انشاءالله مطالب بیشتر درباره این موضوع. متشکرم :)


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