transform-origin

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

مثلا در مورد چرخاندن یک عنصر, اگر مبدا مختصاتی آن عنصر تغییر پیدا کند نتیجه تغییر چرخش متفاوت خواهد بود. تصویر زیر این موضوع را بهتر بیان می کند. توجه داشته باشید که نقطه سیاه مبدا مختصات عنصر که توسط ویژگی transform-origin تعیین شده است را برای یک چرخش 45 درجه نشان می دهد:

این ویژگی مقادیری از نوع طول (px, em,..) و درصد و همینطور کلمات کلیدی مثل top, right, bottom, left و center را می پذیرد.

که در راستای افق کلمات right, left, center به ترتیب معادل 50%, 0% و 100% می باشند.

و همینطور در راستای عمود کلمات کلیدی top, bottom, center به ترتیب معادل 50%, 0% و 100% هستند.

اولین مقدار, مکان مبدا را در جهت افقی و دومین مقدار در جهت عمودی مشخص می کنند. اگر حداقل یکی از مقادیر دو پارامتر اول از کلمات کلیدی باشند, می توانید ترتیب نوشتن راستای افقی و عمودی را عوض کنید.

این ویژگی اگر برای زمانی که transform دو بعدی است استفاده شود دو مقدار می گیرد اما اگر می خواهید محور سوم را برای فضای سه بعدی مقدار دهی کنید باید سه مقدار برای این ویژگی تعیین کنید.

مقدار پارامتر سوم همیشه باید از نوع طول باشد یعنی کلمات کلیدی نمی پذیرد.

اگر فقط یک مقدار تعیین شود مقدار دوم center در نظر گرفته می شود. اگر فقط دو مقدار تعیین شوند مقدار سوم (Z) برای فضای سه بعدی صفر در نظر گرفته می شود.

در ادامه نمونه های صحیحی از مقدار دهی به این ویژگی آورده شده است:

transform-origin: 2px;

transform-origin: bottom;

transform-origin: 3cm 2px;

transform-origin: 2px left;

transform-origin: left 2px;

transform-origin: right top;

transform-origin: top right;

transform-origin: 2px 30% 10px;

transform-origin: 2px left 10px;

transform-origin: left 5px -3px;

transform-origin: right bottom 2cm;

transform-origin: bottom right 2cm;

لطفا با تغییر مقادیر ویژگی transform-origin در دموی زیر به درک بهتر موضوع کمک کنید. توجه داشته باشید که چرخش در حالت hover صورت می گیرد و همینطور از transition برای واضح شدن تغییرات استفاده شده است:

See the Pen transform-origin by Mojtaba Seyedi (@seyedi) on CodePen.

همچنین دموی زیر کمک بزرگی برای درک این ویژگی می باشد. با کلیک کردن روی صفحه مکان مبدا مختصاتی تغییر شکل را تعیین کنید:

See the Pen Animating transform-origin by Dan Wilson (@danwilson) on CodePen.

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

این ویژگی در مرورگرهای قدیمی تر کروم و سافاری و همچنین سیستم عامل اندروید به پیشوند -webkit- نیاز دارد. همینطور در اپرا ورژن 10.5 تا 12.10 نیاز به پیشوند -o- دارد.

برای فایرفاکس های نسخه پایین تر از 16 هم پیشوند -moz- الزامی است. همچنین مرورگر IE9 باید همراه با پیشوند -ms- باشد.

اگر این ویژگی را برای فضای سه بعدی استفاده کنید (یعنی مقدار Z را هم مشخص کنید) در نسخه های پایین تر از 10 مرورگرهای IE و اپرا پشتیبانی نمی شود.