ترجمه این مقاله در جریان است.

تابع ()rotate یک جابجایی که چرخشی دوبعدی نسبت به نقطه‌ای ثابت است را بوجود می‌آورد. نوع خروجی این تابع از جنس <transform-function> می‌باشد.

محور چرخش از طریق مقدار دهی خاصیت transform-origin مشخص می‌شود.

Syntax

مقدار ساخته شده با تابع ()rotate برای چرخش، توسط <angle> مشخص می‌شود. اگر علامت آن مثبت باشه در جهت ساعتگرد حرکت می‌کند؛ اگر منفی باشد در جهت پاد ساعتگرد حرکت می‌کند. چرخش  °180 بازتاب نقطه نامیده می‌شود.

rotate(a)

Values

a
Is an <angle> representing the angle of the rotation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one.
Cartesian coordinates on ℝ2 Homogeneous coordinates on ℝℙ2 Cartesian coordinates on ℝ3 Homogeneous coordinates on ℝℙ3
cos(a)-sin(a) sin(a)cos(a) cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)00sin(a)cos(a)0000100001
[cos(a) sin(a) -sin(a) cos(a) 0 0]

Examples

HTML

<div>Normal</div>
<div class="rotated">Rotated</div>

CSS

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.rotated {
  transform: rotate(45deg); /* Equal to rotateZ(45deg) */
  background-color: pink;
}

Result

Browser compatibility

Please see the <transform-function> data type for compatibility info.

See also

Document Tags and Contributors

Contributors to this page: mdnwebdocs-bot, dijam
Last updated by: mdnwebdocs-bot,