transform

با استفاده از ویژگی transform می توانید شکل, مکان و یا وضعیت یک عنصر را تغییر دهید. این تغییر می تواند دو بعدی و یا سه بعدی باشد.

مقدار این ویژگی می تواند none باشد که به این معنی است که هیچ تغییری انجام نشود. و یا می توان یک و یا تعدادی از توابع زیر را به عنوان مقدار برای این ویژگی تعیین کرد.

لیست توابع دو بعدی:

• translate()
• translateX()
• translateY()
• scale()
• scaleX()
• scaleY()
• rotate()
• skew()
• skewX
• skewY
• matrix()

لیست توابع سه بعدی:

• translateZ()
• translate3d()
• scaleZ()
• scale3d()
• rotateX()
• rotateY()
• rotateZ()
• rotate3d()
• matrix3d()
• perspective()

سیستم مختصات

هر عنصری در CSS دارای یک سیستم مختصاتی است که مبدا آن گوشه بالا و سمت چپ هر عنصر می باشد. وقتی که از ویژگی transform استفاده می کنید مبدا عنصر به وسط آن انتقال پیدا می کند زیرا ویژگی transform-origin (کار این ویژگی تعیین مبدا مختصات است) دارای مقدار پیش فرض 50% 50% است.

شکل اول نشان دهنده محور مختصاتی عنصر در وضعیت عادی آن است و شکل دوم زمانی است که ویژگی transform به عنصر داده می شود:

فرض کنید همزمان دو تغییر می خواهیم در عنصر ایجاد کنیم, داریم:

.element {    
  transform: rotate(90deg) skew(10deg);
}

نکته خیلی مهم اینکه ترتیب نوشتن توابع برای این ویژگی اهمیت دارد. به این دلیل که هر تغییر بر روی عنصر باعث تغییر سیستم مختصاتی آن می شود. و تغییر بعدی بر اساس سیستم مختصاتی جدید اعمال می شود. در مثال بالا اولین تغییر چرخش عنصر به مقدار 90 درجه می باشد پس باید به این نکته توجه کنید که تغییر بعدی در شرایطی صورت می گیرد که محورهای مختصات 90 درجه چرخیده اند.

تغییر اشکال در دنیای کامپیوتر توسط عملیات ماتریسی صورت می گیرند. مثلا وقتی که در فوتوشاپ در حال بزرگ کردن یک دایره با کشیدن آن هستید این به این معنی است که یک عدد در حال ضرب شدن در ماتریس موجود است. همچنین در دنیای ریاضیات ضرب ماتریس A در ماتریس B با ضرب ماتریس B در ماتریس A نتیجه یکسان ندارند. پس به همین دلیل ترتیب نوشتن توابع برای ویژگی transform اهمیت دارد.

نکته دیگری که باید در مورد این ویژگی بدانید این است که زمانی که شکل, وضعیت و یا مکان یک عنصر تغییر می کند, این تغییر تاثیری بر صفحه آرایی نخواهد داشت. یعنی همان مقداری که عنصر در صفحه فضا اشغال کرده بود هنوز هم همان مقدار را گرفته است. و همینطور این تغییرات تاثیری به عناصر مجاور عنصر نخواهند داشت. یعنی اگر عنصر جابه جا شد عنصر کناری آن تکان نخواهد خورد. بهتر است اینطور در نظر بگیرید که عنصر یک لایه به سمت بیرون آمده است و در لایه ای دیگر در حال تغییر شکل و یا مکان است.

این تغییرات تنها تاثیر بر حالت overflow خواهند داشت. یعنی اگر یک عنصر را با استفاده از transform از صفحه خارج کنیم باعث می شود تا صفحه اسکرول بخورد.

پشتیبانی مرورگر ها برای توابع دو بعدی

پشتیبانی مرورگر ها برای توابع سه بعدی