این آموزش در تاریخ ۱۴۰۰/۱۱/۲۵ آپدیت شده است.
آموزش ویژگی transform-origin در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی transform-origin در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی transform-origin در CSS
با استفاده از ویژگی transform-origin در CSS میتوان نقطه / محل قرارگیری ( شروع یا قرار گرفتن ) عناصر تبدیل شده ( اونایی که از ویژگی transform روشون اعمال شده ) را مشخص نمود.
استفاده از ۲ مقدار در این ویژگی برای عناصر ۲D و ۳ مقداری برای عناصر ۳D می باشد.
مقدار اول موقعیت افقی و مقدار دوم موقعیت عمودی و مقدار سوم فقط در صورتی که از transform های سه بعدی استفاده نمایید مشخص میشوند.
برای عمل کردن این ویژگی باید حتما از ویژگی transform استفاده کرده باشید.
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی transform-origin را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : ۲ مقداری ( استفاده از کلمات کلیدی )
|
1 2 3 |
.Farzand:hover{ transform-origin: center left; } |
مثال شماره ۲ : ۲ مقداری ( استفاده از واحدهای اندازه گیری پیکسل و درصد )
|
1 2 3 |
.Farzand:hover{ transform-origin: -2px 50%; } |
مثال شماره ۳ : ۳ مقداری ( باید حتما مقدار ویژگی transform هم سه بعدی باشه )
|
1 2 3 4 |
.Farzand:hover{ transform: rotate3d(-1, 2, 1, 30deg); transform-origin: 10% 80% 140px; } |
Free-Learn
جدول مشخصات ویژگی transform-origin در CSS
در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.
| مقدار پیش فرض | ۵۰% ۵۰% ۰ |
|---|---|
| قابل ارث بری | ندارد | اطلاعات بیشتر |
| قابل متحرک سازی | دارد | اطلاعات بیشتر |
| نسخه | CSS3 |
| نحوه استفاده در جاوااسکریپت | object.style.transformOrigin=”50% top 10px”; |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی transform-origin در CSS پشتیبانی میکنند یا خیر.
در جدول زیر جلوی نام هر یک از مرورگرهای اینترنتی یک عدد وجود داره که اون عدد نسخه اون مرورگر رو مشخص میکنه و داره میگه از اون نسخه به بعد بدون مشکل پشتیبانی میشه ولی برای نسخه های قبل از اون باید از یسری دستورات پیشوندی موجود در جدول زیر استفاده کنیم.
| نام مرورگر | Chrome | Firefox | Opera | Safari | Edge |
| transform-origin | ۳۶ | ۱۶ | ۲۳ | ۹ | ۱۲ |
| transform-origin | ۴ تا ۳۵ -webkit- | ۳٫۵ تا ۱۵ -moz- | ۱۵ تا ۲۲ -webkit- | ۳٫۱ تا ۸ -webkit- | – |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.
|
1 |
transform-origin: X Y Z|initial|inherit; |
Free-Learn
جدول مقادیر ویژگی transform-origin در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| X | محور X ها استفاده از کلمات کلیدی left , center , right یا استفاده از واحدهای اندازه گیری مثه PX و.. ( آموزش واحدهای اندازه گیری در CSS ) |
| Y | محور Y ها استفاده از کلمات کلیدی top , center , bottom یا استفاده از واحدهای اندازه گیری مثه PX و.. ( آموزش واحدهای اندازه گیری در CSS ) |
| Z | محور Z ها – برای Transform (3D) فقط استفاده از واحدهای اندازه گیری مثه PX و.. ( آموزش واحدهای اندازه گیری در CSS ) |
| initial | استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر |
| inherit | استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر |
Free-Learn
معادل درصدی ، کلمات کلیدی
در جدول زیر میتوانید معادل درصدی هر یک از کلمات کلیدی موجود در جدول مقادیر را مشاهده نمایید.
| کلمه کلیدی | معادلش با درصد |
|---|---|
| left | ۰% |
| right | ۱۰۰% |
| bottom | ۱۰۰% |
| top | ۰% |
| center | ۵۰% |
Free-Learn
نکات و توضیحات
- ویژگی transform-origin تنها در صورتی عمل خواهد کرد که از ویژگی transform بروی عنصر مورد نظرتان استفاده کرده باشید.
- استفاده از ۲ مقداری برای transform های ۲بعدی هستش و ۳مقداری برای transform های ۳بعدی.
- اگه خواستید از ۳مقداری استفاده کنید باید حتما مقدار ویژگی transform هم ۳بعدی باشه.
