CSS transform-origin کی کچھ وضاحت

درس اختیاری

پیشنهاد دوره:

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

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

عناصر تبدیل دو بعدی می‌توانند در محورهای x و y عناصر را تغییر دهند. عناصر تبدیل سه‌بعدی همچنین می‌توانند محور Z را تغییر دهند.برای درک بهتر ویژگی transform، لطفاً به ایننمایش

برای درک بهتر ویژگی transform-origin، لطفاً به اینبرای درک بهتر ویژگی transform-origin در حالت تبدیلات سه‌بعدی، لطفاً به این transform توضیحات:

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

.

لطفاً به:CSS3 2D تبدیلی

لطفاً به:CSS3 3D تبدیلی

آموزش CSS3دستنویس HTML DOM

ویژگی transform-origin

مثال

موقعیت پایه‌ای عناصر چرخانده شده را تنظیم کنید:
  div {
  transform: rotate(45deg);
transform-origin: 20% 40%;

}

امتحان کنید

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

گرامر CSS توضیحات چپ %transform-origin:

;

مقادیر ویژگی مقادیر
توضیحات

آکس

  • تعریف جایی که منظر در محور X قرار می‌گیرد. مقادیر ممکن:
  • بالای
  • راست
  • تعریف جایی که منظر در محور Z قرار می‌گیرد. مقادیر ممکن:
  • پایین
چپ

یواکس

  • تعریف جایی که منظر در محور Y قرار می‌گیرد. مقادیر ممکن:
  • بالای
  • وسط
  • تعریف جایی که منظر در محور Z قرار می‌گیرد. مقادیر ممکن:
  • پایین
%

زواکس

  • تعریف جایی که منظر در محور Z قرار می‌گیرد. مقادیر ممکن:

طول

جزئیات فنی مقدار پیش‌فرض:
50% 50% 0 ترتیب ارث:
خیر نسخه:
CSS3 JavaScript گرامر:آیتم

.style.transformOrigin="20% 40%"

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

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

ویژگی کروم ای اینتر افرگام سافاری آپرا
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-