Thuộc tính rotate của CSS

Trang trước Phải
Trang tiếp theo row-gap

định nghĩa và cách sử dụng

rotate Thuộc tính này cho phép bạn quay phần tử.

rotate Thuộc tính này định nghĩa một giá trị biểu thị mức độ quay của phần tử theo hướng kim đồng hồ xung quanh trục z. Để quay phần tử theo trục x hoặc trục y hoặc theo cách khác, phải định nghĩa tương ứng.

rotate giá trị của thuộc tính có thể là một góc, tên trục + góc, hoặc ba giá trị + góc.

Nếu chỉ cung cấp một góc, phần tử sẽ quay theo hướng kim đồng hồ xung quanh trục z.
Nếu cung cấp tên trục + góc, phần tử sẽ quay theo hướng kim đồng hồ xung quanh trục được chỉ định.
Nếu cung cấp ba giá trị + góc, ba giá trị này định nghĩa một vector, phần tử sẽ quay xung quanh vector đó.

để hiểu rõ hơn rotate thuộc tính, hãy xemhiển thị。

lưu ý:Một kỹ thuật khác để quay phần tử là sử dụng với Hàm rotate() CSS thuộc tính CSS transform.

mẫu

ví dụ 1

thay đổi mức độ quay của phần tử:

div {
  rotate: 30deg;
}

thử ngay

ví dụ 2

khi rotate Khi thuộc tính được thiết lập thành vector và góc, phần tử sẽ quay xung quanh vector đó.

Ở đây, vector là [1 1 0] trong mặt phẳng hai chiều, có tọa độ x và y, sau đó quay 60 độ:

div {
  rotate: 1 1 0 60deg;
}

thử ngay

cú pháp CSS

rotate: trục góc|initial|inherit;

giá trị thuộc tính

giá trị	miêu tả
trục	tùy chọn. Nếu không thiết lập, giá trị mặc định là trục z. Định nghĩa trục quay của phần tử. x y z
góc	định nghĩa mức độ quay của phần tử. Đơn vị có thể là: deg（độ） rad（độ弧） quay（lượt）
góc vector	ba số này định nghĩa một vector, phần tử sẽ quay xung quanh vector này. ba số này là tọa độ x, y và z của vector. giá trị cuối cùng là góc quay. giá trị có thể: số số số góc
initial	đặt thuộc tính này về giá trị mặc định. Xem thêm initial。
inherit	thuộc tính này được kế thừa từ phần tử cha. Xem thêm inherit。

chi tiết kỹ thuật

giá trị mặc định:	none
thừa kế:	không
ch製 animation:	hỗ trợ. Xem thêm:thuộc tính liên quan đến animation。
phiên bản:	CSS3
cú pháp JavaScript:	object.style.rotate="-120deg"