صفت transform-origin در css

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

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

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

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

به کمک خاصیت 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 در زبان سی اس اس

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

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

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

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

[html] h3 {transform-origin: left 30%;} [/html]

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

مقدار 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%

[html] h3 {transform-origin: bottom 20px;} [/html]

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

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

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

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

[html] h3 {transform-origin: -4px;} [/html]

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

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

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

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

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

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

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

عناوین ساختاری خاصیت transform-origin	وضعیت ساختاری خاصیت transform-origin
مقدار پیش فرض	50% 50% 0
قابلیت توارث	ندارد
قابلیت تحرک	دارد
ورژن css صفت	CSS3
سینتکس صفت در جاوا اسکریپت	"object.style.transformOrigin="0 0

پشتیبانی مرورگرهای اینترنتی از خاصیت transform-origin

خاصیت css
transform-origin ( پشتیبانی مرورگرها در حالت دو مقداره )	36.0 به بالا و 4.0 تا 36.0 با -webkit-	10.0 به بالا و 9.0 تا 10.0 با -ms-	16.0 به بالا و 3.5 تا 16.0 با -moz-	9.0 به بالا و 3.2 تا 9.0 با -webkit-	23.0 به بالا و 15.0 تا 23.0 با -webkit- و 10.5 تا 23.0 با -o-
transform-origin ( پشتیبانی مرورگرها در حالت سه مقداره )	36.0 به بالا و 12.0 تا 36.0 با -webkit-	10.0	16.0 به بالا و 10.0 تا 16.0 با -moz-	9.0 به بالا و 4.0 تا 9.0 با -webkit-	23.0 به بالا و 15.0 تا 23.0 با -webkit-