CSS3 3D Transform | قسمت دوم: کار با فضای سه بعدی و خاصیت‌ transform-origin

- visibility ٢ mode_comment

به نام خدا

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

در قسمت اول سری CSS3 3D transform درباره‌ی Perspective صحبت کردیم و با خاصیت های perspective و perspective-origin آشنا شدیم.

در این جلسه خاصیت های transform-origin و transform-style را مورد برسی قرار میدهیم.

Transform-Origin

با استفاده از این خاصیت میتونیم نقطه شروع حرکات Transform رو مشخص کنیم. اگر یادتون باشه گفتم که Transform به دو بخش دوبعدی و سه‌بعدی تقسیم میشه.

این خاصیت سه مقدار رو مشخص میکنه. نقطه شروع X، Y و Z. مقدار Z اختیاری است. X مقدارهای center, left, right و مقدار عددی(px, em) و درصدی،  و Y مقدار های center, top, bottom و مقدار عددی و درصدی میگیرد. Z تنها مقدار های عددی(px, em) میگیرد.  مقدار پشفرض این خاصیت 50% 50% 0 هست.

با توجه به اینکه میتوان نقطه شروع محور Z را هم مشخص کرد، پشتیبانی مروررگر ها کمی متفاوت تر است.

ransform-origin-support

 

transform-style

این خاصیت مشخص میکند که فضای عنصر، فضایی دوبعدی باشد یا سه‌بعدی. یکی از کاربردی ترین خاصیت ها هنگام کار با عناصر 3D همین خاصیت هست. در واقع این خاصیت تعیین میکند که آیا محور Z وجود داشته باشد یا خیر.

مقدار پیشفرض این خاصیت flat هست. مقدار preserve-3d تعیین میکند که فضای عنصر سه بعدی باشد و فرزندان این عنصر در محور Z هم حرکت کنند.

میزان پشتیبانی مرورگرها از این خاصیت رو میتونید در تصویر زیر ببینید.

transform-style-support

 

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

موفق باشید.

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

خیلی ممنون
لطفا فایل pdf آموزش + فایل ها پیوست را قرار بدید
با تشکر

علی امینی

فایل های پیوست شده قرار گرفت.

نیاز به لاگین

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