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

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



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

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

2 2884 ۱۶ شهریور ۹۳

به نام خدا

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

در قسمت اول سری 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

 

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

موفق باشید.

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

دیدگاه ها 2 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏

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

  • ارسال دیدگاه

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram