Transformهای 2D
محتویات
- ۱ تبدیل های دوبعدی در CSS
- ۲ پشتیبانی مرورگرها
- ۳ پیشوندهای خاص مرورگر
- ۴ متدهای تبدیل های دوبعدی در CSS
- ۵ متد translate()
- ۶ متد rotate()
- ۷ متد scale()
- ۸ متد scaleX()
- ۹ متد scaleY()
- ۱۰ متد skewX()
- ۱۱ متد skewY()
- ۱۲ متد skew()
- ۱۳ متد matrix()
- ۱۴ خود را با تمرینها امتحان کنید!
- ۱۵ ویژگیهای Transform در CSS
- ۱۶ متدهای 2D Transform در CSS
- ۱۷ منابع آموزشی
تبدیل های دوبعدی در CSS
تبدیل ها (Transforms) در CSS به شما اجازه جابه جایی، چرخش، scale، و کج کردن عناصر را میدهد.[۱]
نشانهگر ماوس را روی عنصر زیر قرار دهید تا یک چرخش دوبعدی را ببینید:
در این فصل شما در مورد ویژگی CSS زیر مطالبی را خواهید آموخت:
transform
پشتیبانی مرورگرها
اعداد موجود در جدول زیر شماره اولین نسخه مرورگرهایی است که بهطور کامل از این ویژگی پشتیبانی میکنند.
ویژگی (به انگلیسی: Property) | ![]() |
![]() |
![]() |
![]() |
![]() |
transform | ۳۶٫۰ | ۱۰٫۰ | ۱۶٫۰ | ۹٫۰ | ۲۳٫۰ |
پیشوندهای خاص مرورگر
برخی از مرورگرهای قدیمی (IE9) برای فهمیدن ویژگیهای تبدیل دوبعدی نیازمند پیشوندهای خاص (-ms-) هستند:
متدهای تبدیل های دوبعدی در CSS
با ویژگی transform
در CSS شما میتوانید از متدهای تبدیل دو بعدی (2D Transform) زیر استفاده کنید:
translate()
rotate()
scaleX()
scaleY()
scale()
skewX()
skewY()
skew()
matrix()
نکته: مطالبی را در مورد 3D Transform در فصل بعدی خواهید آموخت.
متد translate()
متد translate()
عنصر را از موقعیت فعلی خود (با توجه به پارامترهای داده شده برای محور X و محور Y) جابهجا میکند.
مثال زیر عنصر <div> را از موقعیت فعلی خود به ۵۰ پیکسل به سمت راست، و ۱۰۰ پیکسل به سمت پایین جابهجا میکند:
متد rotate()
متد rotate()
عنصر را در جهت عقربههای ساعت یا در خلاف جهت عقربههای ساعت با توجه به مقدار درجه داده شده میچرخاند.
مثال زیر عنصر <div> را در جهت عقربههای ساعت ۲۰ درجه میچرخاند:
استفاده از مقادیر منفی موجب چرخش در خلاف جهت عقربههای ساعت خواهد شد.
مثال زیر عنصر <div> را در خلاف جهت عقربههای ساعت ۲۰ درجه میچرخاند:
متد scale()
متد scale()
اندازه یک عنصر را افزایش یا کاهش میدهد (با توجه به پارامترهای پاس شده برای عرض و ارتفاع)
مثال زیر عرض عنصر <div> را به دو برابر عرض اصلی، و سه برابر ارتفاع اصلی تبدیل میکند:
مثال زیر عرض و ارتفاع عنصر <div> را به نصف اندازه اصلی تبدیل میکند:
متد scaleX()
متد scaleX()
عرض عنصر را افزایش یا کاهش میدهد.
مثال زیر عرض عنصر <div> را دو برابر اندازه اصلی میکند.
مثال زیر عرض عنصر <div> را به نصف اندازه اصلی تبدیل میکند:
متد scaleY()
متد scaleY()
ارتفاع عنصر را افزایش یا کاهش میدهد.
مثال زیر ارتفاع عنصر <div> را به سه برابر اندازه اصلی تبدیل میکند:
مثال زیر ارتفاع عنصر <div> را به نصف اندازه اصلی تبدیل میکند:
متد skewX()
متد skewX()
عنصر را روی محور X با توجه به مقدار زاویه داده شده کج میکند.
مثال زیر عنصر <div> را ۲۰ درجه روی محور X کج میکند.
متد skewY()
متد skewY()
عنصر را روی محور Y با توجه به مقدار زاویه داده شده کج میکند.
مثال زیر عنصر <div> را ۲۰ درجه روی محور Y کج میکند:
متد skew()
متد skew()
عنصر را روی محور X و Y با زوایای داده شده کج میکند.
مثال زیر عنصر <div> را ۲۰ درجه روی محور X، و ۱۰ درجه روی محور Y کج میکند:
اگر پارامتر دوم مشخص نشود، مقدار آن صفر در نظر گرفته میشود؛ بنابراین مثال زیر عنصر <div> را ۲۰ درجه روی محور X کج میکند:
متد matrix()
متد matrix()
تمامی متدهای تبدیل دوبعدی را در یک متد ترکیب میکند.
متد matrix() شش پارامتر دریافت میکند، که شامل تابعهای ریاضی میشود، که به شما اجازه چرخش، scale، جابجایی (Translate)، و کج کردن عناصر را می دهد.
پارامترها به صورت زیر هستند:
matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
خود را با تمرینها امتحان کنید!
ویژگیهای Transform در CSS
جدول زیر تمامی ویژگیهای تبدیل دو بعدی را لیست میکند:
ویژگی | توضیحات |
---|---|
transform | یک تبدیل دوبعدی یا سه بعدی را به عنصر اعمال میکند |
transform-origin | به شما اجازه میدهد که موقعیت تبدیل یافته را تغییر دهید |
متدهای 2D Transform در CSS
تابع | توضیحات |
---|---|
matrix(n,n,n,n,n,n) | یک تبدیل دو بعدی تعریف می کند که از یک ماتریس شش مقداری استفاده می کند |
translate(x,y) | یک تبدیل دوبعدی تعریف می کند که عناصر را در امتداد محور X و Y جابجا می کند |
translateX(n) | یک تبدیل دوبعدی تعریف می کند که عناصر را در امتداد محور X جابجا می کند |
translateY(n) | یک تبدیل دوبعدی تعریف می کند که عناصر را در امتداد محور Y جابجا می کند |
scale(x,y) | یک تبدیل دوبعدی scale تعریف می کند که عرض و ارتفاع عنصر را تغییر می دهد |
scaleX(n) | یک تبدیل دوبعدی scale تعریف می کند که عرض عنصر را تغییر می دهد |
scaleY(n) | یک تبدیل دوبعدی scale تعریف می کند که ارتفاع عنصر را تغییر می دهد |
rotate(angle) | یک چرخش دوبعدی تعریف می کند، زاویه آن در پارامتر تعیین می شود |
skew(x-angle,y-angle) | یک تبدیل مورب در امتداد محورهای X و Y تعریف می کند |
skewX(angle) | یک تبدیل مورب در امتداد محور X تعریف می کند |
skewY(angle) | یک تبدیل مورب در امتداد محور Y تعریف می کند |
منابع آموزشی