آموزش تبدیل 3D CSS

13 جولای 2021

تبدیل 3D CSS

CSS همچنین از تبدیل 3D استفاده می کند.

برای مشاهده تفاوت بین تغییر شکل 2D و 3D ، روی عناصر زیر قرار دهید:

چرخش 2 بعدی
چرخش سه بعدی

در این فصل شما با ویژگی CSS زیر آشنا خواهید شد:

  • transform

پشتیبانی مرورگر

اعداد موجود در جدول اولین نسخه مرورگر را مشخص می کنند که به طور کامل از ویژگی پشتیبانی می کند.



روش های تبدیل 3D CSS

با استفاده از transformویژگی CSS می توانید از روش های تبدیل 3D بعدی استفاده کنید:

  • rotateX()
  • rotateY()
  • rotateZ()

روش rotateX ()

X را بچرخانید

این rotateX()روش یک عنصر را در یک درجه مشخص به دور محور X خود می چرخاند:

مثال

#myDiv {
  transform: rotateX(150deg);
}

روش rotateY ()

Y را بچرخانید

این rotateY()روش یک عنصر را در یک درجه معین به دور محور Y خود می چرخاند:

مثال

#myDiv {
  transform: rotateY(150deg);
}

روش rotateZ ()

این rotateZ()روش یک عنصر را در یک درجه مشخص به دور محور Z خود می چرخاند:

مثال

#myDiv {
  transform: rotateZ(90deg);
}

منبع

مقاله‌های مشابه

7 مرحله فروش بیمه عمر (2)

7 مرحله فروش بیمه عمر (2)

18/9/96 چه بلایی سر آدم میاره خیلی جالبه انقدر سنگ، توام داری درست راه میری اینجوری لنگ میزنی، وقتی یه ذره زمانش طولانی تر بشه دیگه لنگ نمیزنی مجبوری اینجوری کنی من دیگه نمیتونم بیام یه ذره میشینی پامیشی، فروش اینو خیلیها حذف میکنن، برای خیلیها تو ذهنشون همون سنگه...

بیشتر بخوانید
7 مرحله فروش بیمه عمر (1)

7 مرحله فروش بیمه عمر (1)

11/9/96 امروز میخوایم 7 مرحله فروش بیمه عمر یا هر محصولی که شما در کل کره زمین میشناسید، وقتی میگم محصول یه روز این محصولی که داریم ازش صحبت میکنیم میتونه هر چیزی به چیزی بجز بیمه عمر باشه، یکی از مهمترین مباحثی که در دوره تکنسین یاد میگیرید و عملاً آچارفرانسه تمام...

بیشتر بخوانید

شما هم به جمع ۱۰۰,۰۰۰ مشترک خبرنامه‌ ما بپیونید

0 دیدگاه

یک دیدگاه بنویسید

نشانی ایمیل شما منتشر نخواهد شد.