rotate()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Hàm rotate() CSS function định nghĩa một phép biến đổi xoay một phần tử quanh một điểm cố định trên mặt phẳng 2D mà không làm biến dạng nó. Kết quả của nó là kiểu dữ liệu <transform-function>.

Try it

transform: rotate(0);

transform: rotate(90deg);

transform: rotate(-0.25turn);

transform: rotate(3.142rad);

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

Điểm cố định mà phần tử xoay quanh — đề cập ở trên — còn được gọi là gốc biến đổi. Mặc định là tâm của phần tử, nhưng bạn có thể đặt gốc biến đổi tùy chỉnh bằng thuộc tính transform-origin.

Cú pháp

css

rotate(a)

Giá trị

a: Là một <angle> biểu thị góc xoay. Chiều xoay phụ thuộc vào hướng viết. Trong ngữ cảnh trái sang phải, góc dương biểu thị xoay theo chiều kim đồng hồ, góc âm biểu thị xoay ngược chiều kim đồng hồ. Trong ngữ cảnh phải sang trái, góc dương biểu thị xoay ngược chiều kim đồng hồ, góc âm biểu thị xoay theo chiều kim đồng hồ. Xoay 180° được gọi là phản xạ qua điểm.

Tọa độ Descartes trên ℝ^2	Tọa độ thuần nhất trên ℝℙ^2	Tọa độ Descartes trên ℝ^3	Tọa độ thuần nhất trên ℝℙ^3
$\left( \begin{array}{cc} \cos(a) & -\sin(a) \\ \sin(a) & \cos(a) \end{array} \right)$	$\left( \begin{array}{ccc} \cos(a) & -\sin(a) & 0 \\ \sin(a) & \cos(a) & 0 \\ 0 & 0 & 1 \end{array} \right)$	$\left( \begin{array}{ccc} \cos(a) & -\sin(a) & 0 \\ \sin(a) & \cos(a) & 0 \\ 0 & 0 & 1 \end{array} \right)$	$\left( \begin{array}{cccc} \cos(a) & -\sin(a) & 0 & 0 \\ \sin(a) & \cos(a) & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \\ \end{array} \right)$
	`[cos(a) sin(a) -sin(a) cos(a) 0 0]`

Cú pháp chính thức

<rotate()> = 
  rotate( [ <angle> | <zero> ] )

Ví dụ

Ví dụ cơ bản

HTML

html

<div>Bình thường</div>
<div class="rotated">Đã xoay</div>

CSS

css

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

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

Kết quả

Kết hợp xoay với phép biến đổi khác

Nếu bạn muốn áp dụng nhiều phép biến đổi cho một phần tử, hãy chú ý đến thứ tự các phép biến đổi mà bạn chỉ định. Ví dụ, nếu bạn xoay trước khi dịch chuyển, phép dịch chuyển sẽ theo trục xoay mới!

HTML

html

<div>Bình thường</div>
<div class="rotate">Đã xoay</div>
<div class="rotate-translate">Xoay + Dịch chuyển</div>
<div class="translate-rotate">Dịch chuyển + Xoay</div>

CSS

css

div {
  position: absolute;
  left: 40px;
  top: 40px;
  width: 100px;
  height: 100px;
  background-color: lightgray;
}

.rotate {
  background-color: transparent;
  outline: 2px dashed;
  transform: rotate(45deg);
}

.rotate-translate {
  background-color: pink;
  transform: rotate(45deg) translateX(180px);
}

.translate-rotate {
  background-color: gold;
  transform: translateX(180px) rotate(45deg);
}

Kết quả

Thông số kỹ thuật

Specification
CSS Transforms Module Level 1 # funcdef-transform-rotate

Khả năng tương thích trình duyệt

Xem thêm

Help improve MDN

Learn how to contribute

This page was last modified on Jan 1, 1970 by MDN contributors.

View this page on GitHub • Report a problem with this content