آموزش ویژگی Transform سه بعدی در CSS

Ratings

(0)

تبدیل های سه بعدی در CSS

CSS از تبدیل های سه بعدی نیز پشتیبانی می کند. ماوس خود را روی عناصر زیر ببرید تا تفاوت بین یک تبدیل دو بعدی و سه بعدی را مشاهده کنید:

چرخش دوبعدی

چرخش سه بعدی

در این مقاله، به بررسی ویژگی transform می پردازیم.

تابع های تبدیل(Transform) سه بعدی در CSS

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

rotateX()
rotateY()
rotateZ()

بررسی تابع rotateX() در CSS

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

مثال شماره 1

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

امتحان کنید

بررسی تابع rotateY() در CSS

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

مثال شماره 2

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

امتحان کنید

بررسی متد rotateZ() در CSS

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

مثال شماره 3

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

امتحان کنید

ویژگی های Transform در CSS

در جدول زیر، لیست تمام ویژگی های transform سه بعدی را مشاهده می کنید:

توضیح	ویژگی
این ویژگی، یک تبدیل دوبعدی یا سه بعدی را به یک عنصر اعمال می کند.	transform
این ویژگی به ما امکان می دهد تا مبدا را برای عناصر تبدیل شده مشخص کنیم.	transform-origin
این ویژگی مشخص می کند که عناصر تودرتو چگونه باید در فضای سه بعدی ارائه(render) شوند.	transform-style
این ویژگی، پرسپکتیو را برای نحوه مشاهده عناصر سه بعدی مشخص می کند.	perspective
این ویژگی مشخص می کند که کاربر در کدام موقعیت در حال نگاه کردن به عنصر سه بعدی است.	perspective-origin
با استفاده از ویژگی backface-visibility در CSS میتوان مشخص کرد که آیا کاربر بتواند قسمت پشتی یک عنصر را ببینید یا خیر!؟ قسمت پشتی یا BackFace یک عنصر دقیقا تصویر آن عنصر در یک آینه می باشد[1]. تعیین می کند که آیا یک عنصر، در صورتی که رو به روی صفحه نمایش نباشد، باید قابل مشاهده باشد یا خیر.	backface-visibility

تابع های Transform سه بعدی در CSS

توضیح	تابع
یک تبدیل(transformation) سه بعدی را با استفاده از یک ماتریکس 4×4 از 16 مقدار را تعریف می کند.	matrix3d()
یک انتقال(translation) سه بعدی را تعریف می کند.	translate3d()
یک انتقال سه بعدی، را تنها با استفاده از مقدار محور Z تعریف می کند.	translateZ()
یک تبدیل مقیاس(scale) سه بعدی را تعریف می کند.	scale3d()
یک تبدیل مقیاس(scale) سه بعدی را با دادن یک مقدار برای محور Z تعریف می کند.	scaleZ()
یک چرخش سه بعدی را تعریف می کند.	rotate3d()
یک چرخش سه بعدی را در طول محور X تعریف می کند.	rotateX()
یک چرخش سه بعدی را در طول محور Y تعریف می کند.	rotateY()
یک چرخش سه بعدی را در طول محور Z تعریف می کند.	rotateZ()
یک ویوی(view) پرسپکتیو را برای یک عنصر سه بعدی تبدیل(transformed) شده تعریف می کند.	perspective()

منابع:

پاراگراف [1]: https://free-learn.ir

تاریخ انتشار : 03 اسفند 1403.
تاریخ بروزرسانی : 04 اسفند 1403.
بازدید: 141

نوشتن دیدگاه

لطفا نظرات خود را بیان کنید. به سوالات در سریع ترین زمان پاسخ داده خواهد شد.اما به نکات زیر توجه کنید:
1. سعی کنید نظرات شما مرتبط با مقاله ی مورد نظر باشد، در غیر این صورت پاسخ داده نخواهد شد.
2. سوالات خود را به صورت کوتاه بیان کنید و از پرسیدن چند سوال به طور همزمان خودداری کنید.
3. سوال خود را به طور واضح بیان کنید و از کلمات مبهم استفاده نکنید.