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

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



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

CSS3 3D Transform | قسمت اول : کار با عناصر سه بعدی و Perspective

7 4695 ۱۴ شهریور ۹۳

به نام خدا

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

CSS3 تحولات عظیمی در کار با عناصر ایجاد کرد که مهم ترین آنها انیمیشن ها و Transform و Transition می باشد. Transform یا به عبارتی تغییر شکل، متد ها و خاصیت هایی به همراه خود دارد که میتوان به وسیله ی آنها اعمالی چون چرخش(rotate)، جابه‌جایی(translate)، بزرگنمایی(scale)و کج‌کردن(skew) را بر روی عناصر انجام داد.

Transform ها به دو دسته ی دو بعدی و سه بعدی تقسیم میشوند. در 2D Transform(تغییر شکل دو بعدی) تنها با دو محور X و Y کار میکردیم ولی در 3D Transform پای محور Z یا عمق نیز به میان آمد.

ژرف‌نمایی یا پرسپکتیو(Perspective)


perspective-text

ویکی‌پدیا: در واقع برای نشان دادن فضای سه بعدی روی صفحهٔ دوبعدی معمولاً پرسپکتیو و قوانین آن را به کار می‌برند. این قوانین با استفاده از خطای دید به دست آمده و عمق کاذب و بعد مجازی ایجاد شده می‌تواند تصویری از فضای سه بعدی را بدهد. می‌توان گفت پرسپکتیو نگاهی است که معمولاً از جهان بیرون یعنی عالم محسوسات مادی آغاز می‌شود و سپس به درون‌نگری راه می‌برد.

ادامه...

perspective.m.min

CSS3  3D Transforms

و حالا نوبت پرسپکتیو در صفحات وب رسیده است! البته منظورم از حالا همین الان نیست چون تقریبا از سال 2010 عناصر سه بعدی توسط مرورگر کروم پشتیبان میشد و حالا پشتیبانی از 3D Transform همه گیر شده و حتی مرورگر IE هم از نسخه ی 10 و 11 این تغییر شکل های سه بعدی رو پشتیبانی میکنه.

خاصیت های CSS3 Transform عبارتند از transform , transform-style , transform-origin , perspective  , perspective-origin و backface-visibility که در این مطلب به برسی خاصیت های perspective و perspective-origin می پردازیم.

CSS3 Transform متدهایی چون rotate ، translate ، scale ، skew دارد که برای کار با عناصر دو بعدی است و متد های rotate3d ، scale3d ، translate3d ، perspective برای کار با عناصر سه بعدی است. میتوانید لیست کامل آنها را در این صفحه ببینید.

میزان پشتیبانی از خاصیت و متد های CSS3 Transform


همونطور که در بالا اشاره کردم، مرورگر ها پشتیبانی خیلی خوبی از CSS3  Transforms دارند. در تصویر زیر میتونید مقدار پشتیبانی رو ببینید.

support

با توجه به تصویر بالا کافیست خاصیت هارا تنها همراه با پیشوند -webkit- بنویسیم.

Perspective


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

نکته : متد rotateY یک عنصر را هم‌تراز با محور Y و متد rotateX یک عنصر را هم‌تراز با محور X میچرخاند.

میتونید در دموی زیر مقدار پرسپکتیو را تغییر دهید و نتیجه را ببینید.(ترجیحا دمو هارو با مرورگر کروم ببینید)


همانطور که دیدید بهترین مقدار میتواند از 1.5 برابر عرض عنصر بیشتر باشد.

perspective-origin


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

X و Y مقدار های درصدی و پیکسلی میگیرند. میتوانید به X مقدار های left ، right و center، و به Y مقادیر top ، bottom و center بدهید. مقدار پیشفرض برابر center center یا 50% 50% میباشد.

از این خاصیت همراه با خاصیت perspective استفاده میکنند.

روی کادر مشخص شده در دمو ها هاور کنید تا مقدار perspective-origin تغییر کند.

موفق باشید

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

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

  • ‏‏

    سلام ، مطلب جالبی خوبی بود
    یک سوال داشتم ، میدونیم که روز به روز داره تعداد افردای که با موبایل هاشون به اینترنت متصل میشند زیاد تر میشه
    و بیشتر جلوه هایی که ما چه در css و جی کوئری برای زیبایی سایتمون استفاده میکنیم ، اکثرا در دستکاپ و با موس امکان پذیر هستش.
    خوب ما چطوری میتونیم از css در سایتمون استفاده کنیم که در صفحه های لمسی هم بخوبی موس کارایی داشته باشه؟!
    باتشکر

    • ‏‏
      علی امینی(۱۵ شهریور ۱۳۹۳)

      سلام
      کار آسونیه فقط یه مقدار کد جاوااسکریپت باید بنویسی. مثلا یه عنصر دارید که توسط CSS گفتید وقتی روش هاور شد، رنگ بکگراندش تغییر کنه(یعنی از شبه کلاس :hover استفاده کردید). کنار همون سلکتور یه ویرگول(کاما) بذارید و به سلکتور به جای شبه کلاس :hover، کلاس .hover رو اضافه کنید تا وقتی اون عنصر دارای کلاس hover شد، مثلا رنگ بکگراندش عوض بشه.
      .div:hover, .div.hover{
      /* some code */
      }

      تا اینجا کار با سی اس اس بود. خب میریم سراغ جاوا اسکریپت؛ همونطور که میدونید، ماوس رویداد های مخصوص به خودش رو داره مثل mouseover, mouseleave, mouseenter, mousedown, mouseup؛ حالا باید بدونیم صفحه های لمسی چه رویداد هایی دارن تا بتونیم یک رویداد دیگه رو جایگزین رویداد hover: یا mouseover کنیم. میتونید به این صفحه مراجعه کنید.
      اگه به اون صفحه مراجعه کرده باشید میبینید که رویداد های صفحه های لمسی از این قرار اند: touchstart , touchend, touchcancel, touchleave, touchmove.
      رویداد های زیر برابر همدیگرند و property هاشون یکی هست(تقریبا):
      touchstart == mousedown
      touchend == mouseup
      touchleave == mouseout
      touchmove == mousemove

      بنابراین کد HTML به شکل زیر میشه:
      <div ontouchstart="add_hover_classToThisElementFn()" class="div"></div>
      وقتی روی المنت رویداد thouchstart رخ داد، تابع add_hover_classToThisElementFn اجرا میشه و ما با استفاده از این تابع، به اون عنصر کلاس hover رو هم اضافه میکنیم تا رنگ بکگراند تغییر کنه.
      کلا قاعده ای این چنینی داره.
      ان‌شاالله چند وقت دیگه مطلبی در این مورد منتشر میکنم.
      موفق باشید

  • ‏‏
    بردیا راستین(۱۷ شهریور ۱۳۹۳)

    مطلب خیلی مفیدی بود فقط یه سوال اونم اینه که مثلا ما به این المنتمون width دادیم 200 پیکسل height هم همینطور حالا میخوایم به صورت 3d بچرخونیمش المنت مثل کاغذ میچرخ منظورم اینه که طول داره ارتفاع هم داره حالا ما چه جوری عرضشو زیاد کنیم که کاملا 3 بعدی بشه ؟ یعنی مثلا بخوایم یه مکعب مربع بسازیم که همیشه بچرخه ؟

  • ‏‏

    سلام آیا میدانید طرز کشیدن نقاشی سه بعدی خطای دید روی کاغذ و نقاشی سه بعدی کف خیابانی را آموزش بدید؟ در صورت مثبت بودن لطف می کنید از طریق ایمیل اطلاع رسانی کنید؟

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

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram