خصوصیت transform-origin

چاپ

مثال (خصوصیت transform-origin)

تنظیم مکان قرارگیری عنصر تبدیل شده:

div
{
transform: rotate(45deg);
transform-origin:20% 40%;
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin:20% 40%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
-webkit-transform-origin:20% 40%; /* Safari and Chrome */
}
خودتان امتحان کنید »

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

Internet Explorer Firefox Opera Google Chrome Safari

مرورگرهای Internet Explorer 10، Firefox و Opera، خصوصیت transform-origin را پشتیبانی می کنند.

Internet Explorer 9 از خصوصیت جایگزین ms-transform-origin- (فقط تبدیل دو بعدی) استفاده می کند.

Safari و Chrome از خصوصیت جایگزین webkit-transform-origin- (تبدیل سه بعدی و دو بعدی) استفاده می کنند.

مرورگر Opera فقط انتقال دو بعدی را پشتیبانی می کند.


تعریف و کاربرد

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

عناصر تبدیل شده دو بعدی می توانند در جهت محور xها و محور yها حرکت کنند. اما عناصر تبدیل شده سه بعدی می توانند در جهت محور zها نیز حرکت می کنند.

برای درک بهتر خصوصیت transform-origin، می توانید demo  را ملاحظه فرمایید.

توجه: این خصوصیت می بایست با خصوصیت transform به کار گرفته شود.

برای درک بهتر این خصوصیت برای تبدیل سه بعدی demo را ملاخظه فرمایید.

مقدار پیشفرض 50% 50% 0
ارث بری خیر
نسخه CSS3
JavaScript ساختار object.style.transformOrigin="20% 40%"

نحوه استفاده

transform-origin: x-axis y-axis z-axis;
Property مقدارتوضیحات
x-axis

مشخص می کند عنصر کجای محور xها قرار گیرد. مقادیر ممکن عبارتند از:

  • left
  • center
  • right
  • length
  • %
y-axis

 مشخص می کند که عنصر کجای محور yها قرار گیرد. مقادیر ممکن عبارتند از:

  • top
  • center
  • bottom
  • length
  • %
z-axis

مشخص می کند که عنصر کجای محور zها قرار گیرد.

  • length