Hàm rotate

Hàm rotate() thiết lập phép xoay phần tử theo một góc xác định. Được sử dụng kết hợp với thuộc tính transform. Giá trị của thuộc tính là góc đo bằng bất kỳ đơn vị góc nào. Giá trị dương xoay theo chiều kim đồng hồ, giá trị âm - ngược chiều kim đồng hồ. Phép xoay được thực hiện xung quanh điểm, được xác định bởi thuộc tính transform-origin.

Cú pháp

cssbộ chọn {
  transform: rotate(góc);
}

Ví dụ

Trong ví dụ này khối được xoay 30 độ theo chiều kim đồng hồ:

html<div id="elem">lorem ipsum</div>

css#elem {
  transform: rotate(30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

Ví dụ

Trong ví dụ này khối được xoay 30 độ ngược chiều kim đồng hồ:

html<div id="elem">lorem ipsum</div>

css#elem {
  transform: rotate(-30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

Ví dụ

Trong ví dụ này, khi di chuột qua, khối sẽ xoay 1 vòng, vì giá trị xoay được đặt là 1turn (có thể đạt hiệu ứng tương tự nếu đặt góc xoay là 360deg). Để phép xoay được mượt mà, thuộc tính transition được thêm vào:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 3px solid black;
  width: 100px;
  height: 50px;
  transition: transform 3s linear;
}
#elem:hover {
  transform: rotate(1turn);
}

Результат:

Xem thêm