ویژگی rotate CSS

صفحه قبلی سمت راست
صفحه بعدی row-gap

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

rotate ویژگی اجازه می‌دهد تا عنصر را بچرخاند.

rotate ویژگی مقداری را تعریف می‌کند که نشان‌دهنده میزان چرخش معکوس معین عنصر به دور از محور z است. برای چرخش عنصر به دور از محور x یا y یا به روش دیگر، باید تعریف‌های مناسب انجام شود.

rotate مقدار ویژگی می‌تواند یک زاویه، نام محور + زاویه، یا سه مقدار + زاویه باشد.

اگر فقط یک زاویه داده شود، عنصر به دور از محور z به صورت معکوس معین می‌چرخد.
اگر نام محور و زاویه داده شود، عنصر به دور از محور指定的 به صورت معکوس معین می‌چرخد.
اگر سه مقدار و زاویه داده شود، این سه مقدار یک بردار را تعریف می‌کنند که عنصر به دور از آن می‌چرخد.

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

توجه:یک روش دیگر برای چرخش عنصر استفاده از توابع rotate() CSS ویژگی CSS transform.

مثال

مثال 1

تغییر چرخش عنصر:

div {
  rotate: 30deg;
}

آزمایش کنید

مثال 2

وقتی rotate وقتی ویژگی‌های بردار و زاویه تنظیم می‌شوند، عنصر به دور از این بردار می‌چرخد.

در اینجا، بردار دو بعدی [1 1 0] است که دارای مختصات x و y است و سپس 60 درجه می‌چرخد:

div {
  rotate: 1 1 0 60deg;
}

آزمایش کنید

نوع CSS

rotate: محور angle|initial|inherit;

مقدار ویژگی

مقدار	توضیح
محور	اختیاری. اگر تنظیم نشود، مقدار پیش‌فرض z محور است. تعریف محوری که عنصر به دور از آن می‌چرخد. مقدارهای ممکن: x y z
angle	تعریف میزان چرخش عنصر. واحد‌های ممکن: degدرجه radدرجه turnدوره
زاویه بردار	سه عدد یک بردار را تعریف می‌کنند، عنصر به دور از این بردار می‌چرخد. این سه عدد به ترتیب مختصات x، y و z بردار هستند. آخرین مقدار زاویه چرخش است. مقدارهای ممکن: number number number angle
initial	این ویژگی را به مقدار پیش‌فرض خود تنظیم می‌کند. به: initial.
inherit	این ویژگی را از عنصر والد خود ارث می‌برد. به: inherit.

جزئیات فنی

مقدار پیش‌فرض:	none
ارث:	خیر
انیمیشن ایجاد:	پشتیبانی می‌شود. لطفاً به:ویژگی‌های مرتبط با انیمیشن.
نسخه:	CSS3
نوع جاوااسکریپت:	object.style.rotate="-120deg"