آموزش ویژگی transform-origin در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی transform-origin در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی transform-origin در CSS
با استفاده از ویژگی transform-origin در CSS میتوان نقطه / محل قرارگیری ( شروع یا قرار گرفتن ) عناصر تبدیل شده ( اونایی که از ویژگی transform روشون اعمال شده ) را مشخص نمود.
استفاده از ۲ مقدار در این ویژگی برای عناصر ۲D و ۳ مقداری برای عناصر ۳D می باشد.
مقدار اول موقعیت افقی و مقدار دوم موقعیت عمودی و مقدار سوم فقط در صورتی که از transform های سه بعدی استفاده نمایید مشخص میشوند.
برای استفاده از این ویژگی باید حتما از ویژگی transform نیز استفاده کرده باشید.
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی transform-origin را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : استفاده از کلمات کلیدی ( center left ) یعنی از وسط سمت چپ
|
1 2 3 4 |
.f2:hover{ transform: rotate(180deg); transform-origin: center left; } |
مثال شماره ۲ : استفاده از واحد اندازه گیری پیکسل ( PX ) و درصد ( % )
|
1 2 3 4 |
.f2:hover{ transform: rotate(180deg); transform-origin: -2px 50%; } |
مثال شماره ۳ :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<body> <div class="origin" style="transform-origin: top left"></div> <div class="origin" style="transform-origin: top center"></div> <div class="origin" style="transform-origin: top right"></div> <div class="origin" style="transform-origin: center left"></div> <div class="origin" style="transform-origin: center center"></div> <div class="origin" style="transform-origin: center right"></div> <div class="origin" style="transform-origin: bottom left"></div> <div class="origin" style="transform-origin: bottom center"></div> <div class="origin" style="transform-origin: bottom right"></div> </body> |
Free-Learn
جدول مشخصات ویژگی transform-origin در CSS
در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.
| مقدار پیش فرض | ۵۰% ۵۰% ۰ |
|---|---|
| قابل ارث بری | ندارد | اطلاعات بیشتر |
| قابل متحرک سازی | دارد | اطلاعات بیشتر |
| نسخه | CSS3 |
| نحوه استفاده در جاوااسکریپت | object.style.transformOrigin=”50% top 10px”; |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی transform-origin در CSS پشتیبانی میکنند یا خیر.
| ۲ مقداری | Chrome | Firefox | Opera | Safari | IE |
| transform (2D) | ۳۶٫۰ ۴٫۰ -webkit- |
۱۶٫۰ ۳٫۵ -moz- |
۲۳٫۰ ۱۵٫۰ -webkit- ۱۰٫۵ -o- |
۹٫۰ ۳٫۲ -webkit- |
۱۰٫۰ ۹٫۰ -ms- |
| ۳ مقداری | Chrome | Firefox | Opera | Safari | IE |
| transform (3D) | ۳۶٫۰ ۱۲٫۰ -webkit- |
۱۶٫۰ ۱۰٫۰ -moz- |
۲۳٫۰ ۱۵٫۰ -webkit- |
۹٫۰ ۴٫۰ -webkit- |
۱۰٫۰ |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.
|
1 |
transform-origin: x-axis y-axis z-axis|initial|inherit; |
Free-Learn
جدول مقادیر ویژگی transform-origin در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| x-axis | محور X ها مقادیر قابل قبول » کلمات کلیدی left , center , right یا استفاده از واحدهای اندازه گیری همچون px و یا استفاده از درصد ( % ) ( آموزش واحدهای اندازه گیری در CSS ) |
| y-axis | محور Y ها مقادیر قابل قبول » کلمات کلیدی top , center , bottom یا استفاده از واحدهای اندازه گیری همچون px و یا استفاده از درصد ( % ) ( آموزش واحدهای اندازه گیری در CSS ) |
| z-axis | محور Z ها – برای عناصر سه بعدی مقدار قابل قبول » فقط واحدهای اندازه گیری همچون px,em و .. ( آموزش واحدهای اندازه گیری در CSS ) |
| initial | استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر |
| inherit | استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر |
Free-Learn
معادل درصدی ، کلمات کلیدی
در جدول زیر میتوانید معادل درصدی هر یک از کلمات کلیدی موجود در جدول مقادیر را مشاهده نمایید.
| کلمه کلیدی | معادلش با درصد |
|---|---|
| left | ۰% |
| right | ۱۰۰% |
| bottom | ۱۰۰% |
| top | ۰% |
| center | ۵۰% |
Free-Learn
نکات و توضیحات
- ویژگی transform-origin تنها در صورتی عمل خواهد کرد که از ویژگی transform بروی عنصر مورد نظرتان استفاده کرده باشید.
برخی از مرورگرها در نسخه های قدیمی تر از این ویژگی پشتیبانی نمی کنند لذا باید برای حل این مشکل از یسری دستورات پیشوندی از نسخه مشخص شده آن مرورگر ( که در جدول پشتیبانی مرورگرها مشخص شده ) استفاده نمایید.
- -webkit- برای مرورگر کروم و سافاری و اُپرا
- -moz- برای مرورگر موزیلا فایرفاکس
- -ms- برای مرورگر اینترنت اکسپلورر
