آموزش ویژگی transform-origin در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی 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 ) یعنی از وسط سمت چپ

امتحان کنید

مثال شماره ۲ : استفاده از واحد اندازه گیری پیکسل ( PX ) و درصد ( % )

امتحان کنید

مثال شماره ۳ :

امتحان کنید

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 بصورت زیر می باشد.

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- برای مرورگر اینترنت اکسپلورر

Free-Learn

دریافت PDF یا پرینت این مطلب