ویژگی transform-origin CSS

تعریف و استفاده

ویژگی transform-origin به شما اجازه می‌دهد که مکان عنصر تبدیل شده را تغییر دهید.

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

برای درک بهتر ویژگی transform-origin، لطفاً به ایننمایش.

کاربران Safari/Chrome: برای درک بهتر استفاده از ویژگی transform-origin در حالت تبدیل سه‌بعدی، لطفاً به ایننمایش.

نکته:این ویژگی باید با transform ویژگی‌ها استفاده کنید.

برای درک بهتر ویژگی transform، لطفاً به ایننمایش.

لطفاً به:

آموزش CSS3:تغییرات 2D CSS3

آموزش CSS3:تغییرات 3D CSS3

دستورالعمل HTML DOM:ویژگی transformOrigin

مثال

تعیین مکان نقطه شروع چرخش عنصر:

div {
  transform: rotate(45deg);
  transform-origin: 20% 40%;
}

آموزش شخصی

مثال‌های بیشتری در پایین صفحه وجود دارد.

نوشتار CSS

transform-origin: x-axis y-axis z-axis;

مقدار ویژگی

مقدار توضیحات
x-axis

تعریف مکان ویژگی دیداری در جایی از محور X. مقادیر ممکن:

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

تعریف مکان ویژگی دیداری در جایی از محور Y. مقادیر ممکن:

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

تعریف مکان ویژگی دیداری در جایی از محور Z. مقادیر ممکن:

  • length

جزئیات فنی

مقدار پیش‌فرض: 50% 50% 0
ارث‌پذیری: خیر
نسخه: CSS3
نوشتار جاوااسکریپت: object.style.transformOrigin="20% 40%"

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

اعداد موجود در جدول نشان‌دهنده‌ی نسخه‌ی اولیه‌ی مرورگرهایی هستند که این ویژگی را کامل پشتیبانی می‌کنند.

اعداد موجود در جدول نشان‌دهنده‌ی نسخه‌ی اولیه‌ی مرورگرهایی هستند که این ویژگی را کامل پشتیبانی می‌کنند.

ویژگی Chrome IE Firefox Safari Opera
transform-origin
(دو‌گانه‌ی گرامری)		 36.0
4.0 -webkit-		 10.0
9.0 -ms-		 16.0
3.5 -moz-		 9.0
3.2 -webkit-		 23.0
15.0 -webkit-
10.5 -o-
transform-origin
(سه‌گانه‌ی گرامری)		 36.0
12.0 -webkit-		 10.0 16.0
10.0 -moz-		 9.0
4.0 -webkit-		 23.0
15.0 -webkit-