صفت transform-origin در css مبدا مختصات انیمیشن تگ html

در این مقاله از سایت آموزی در مجموعه آموزش های صفات سی اس اس به بررسی و تحلیل خاصیت transform-origin در زبان سی اس اس می پردازیم.

ویژگی کاربردی transform-origin در سومین نسخه این زبان طراحی یعنی css3 معرفی شده است.

صفت white-space در css مدیریت فضاهای خالی متن تگ html

صفت transform-origin در css مبدا مختصات انیمیشن تگ html

معرفی و کاربرد ویژگی transform-origin در زبان طراحی css

به کمک خاصیت transform-origin در CSS3 می توانیم مبدا مختصات تغییر شکل یا انیمیشن را در تگ html تعیین نماییم.

تغییر شکل های دو بعدی می تواند در راستای محور x و y یک عنصر html را تغییر دهد. و تغییر شکل های سه بعدی همچنین می تواند در راستای محور Z یک عنصر html را تغییر دهد.

در زمان استفاده از خصوصیت transform-origin حتما باید از ویژگی transform هم همراه با آن جهت اعمال انیمیشن استفاده کنید.

نکات مهم

  1. خصوصیت transform-origin می تواند 5 کلمه کلیدی center و top و bottom و right و left را بپذیرد.
  2. مقدار اول برای ویژگی transform-origin ، کلمات کلیدی center و left و right در راستای افق به ترتیب معادل 50% و 0% و 100% می باشند.
  3. مقدار دوم برای ویژگی transform-origin ، کلمات کلیدی center و top و bottom در راستای عمود به ترتیب معادل 50% و 0% و 100% می باشند.
  4. مقدار سوم برای ویژگی transform-origin ، همواره از نوع مقدار طولی می باشد. و از نوع کلمه کلیدی نیست.
  5. مقدار طولی که به عنوان پارامتر سوم به کار می رود، منجر به تغییر شکل ها در راستای محور Z در فضای سه بعدی خواهد شد.
  6. اگر برای خصوصیت transform-origin ، تنها یک مقدار تعیین کنید. مقدار دوم کلمه کلیدی center در نظر گرفته شده و مقدار سوم در راستای محور Z صفر در نظر گرفته می شود.
  7. اگر برای خصوصیت transform-origin ، دو مقدار تعیین کنید. باز هم مقدار سوم در راستای محور Z صفر در نظر گرفته می شود.

مقادیر صفت کاربردی transform-origin در زبان طراحی css

صفت transform-origin که در زبان طراحی CSS3 معرفی شده است، 5 مقدار می پذیرد که عبارتند از:

  1. مقدار x-axis
  2. مقدار y-axis
  3. مقدار z-axis
  4. مقدار initial
  5. مقدار inherit

مقدار x-axis درون خاصیت transform-origin در زبان css

اگر خاصیت transform-origin را برای یک عنصر html برابر با مقدار x-axis قرار دهیم، در حقیقت می خواهیم تعیین کنیم برای عنصر html ، تغییر شکل در کجای محور x ها ( در راستای افق ) قرار بگیرد.

مقادیر ممکن در راستای محور x ها ( x-axis )

  1. مقدار left
  2. مقدار center
  3. مقدار right
  4. مقدار length ( عددی بر مبنای px و em و … )
  5. مقدار % ( مقدار درصدی )

مقدار پیش فرض مرکز محور x ها 50%

مقدار y-axis درون خاصیت transform-origin در زبان css

اگر خاصیت transform-origin را برای یک عنصر html برابر با مقدار y-axis قرار دهیم، در حقیقت می خواهیم تعیین کنیم برای عنصر html ، تغییر شکل در کجای محور y ها ( در راستای عمود ) قرار بگیرد.

مقادیر ممکن در راستای محور y ها ( y-axis )

  1. مقدار top
  2. مقدار center
  3. مقدار bottom
  4. مقدار length ( عددی بر مبنای px و em و … )
  5. مقدار % ( مقدار درصدی )

مقدار پیش فرض مرکز محور y ها 50%

مقدار z-axis درون خاصیت transform-origin در زبان سی اس اس

اگر خاصیت transform-origin را برای یک عنصر html برابر با مقدار z-axis قرار دهیم، در حقیقت می خواهیم تعیین کنیم برای عنصر html ، تغییر شکل در فضای سه بعدی در کجای محور Z ها قرار بگیرد.

مقادیر ممکن در راستای محور y ها ( y-axis )

  1. مقدار length ( عددی بر مبنای px و em و … )

مقدار initial درون خاصیت transform-origin در زبان css

اگر خاصیت transform-origin را برابر با مقدار initial تعریف کنیم، در حقیقت مقدار پیش فرض این خصوصیت برای تگ html مورد نظر اعمال می شود.

مقدار inherit درون خاصیت transform-origin

اگر خاصیت transform-origin را برابر با مقدار inherit تعریف کنیم، در واقع تگ html مربوطه خصوصیت مورد نظر را از والد پدری خود به ارث می برد.

صفت transform-origin در css مبدا مختصات انیمیشن تگ html

صفت transform-origin در css مبدا مختصات انیمیشن تگ html

بررسی خاصیت transform-origin از نظر نسخه زبان طراحی css

ویژگی کاربردی transform-origin در سومین نسخه این زبان طراحی یعنی css3 معرفی شده است.

بررسی ساختاری خصوصیت transform-origin در زبان طراحی سی اس اس