Thuộc tính xoay CSS
Định nghĩa và cách sử dụng
Thuộc tính rotate
cho phép bạn xoay các phần tử.
Thuộc tính rotate
xác định giá trị cho mức độ xoay một phần tử theo chiều kim đồng hồ quanh trục z. Để xoay một phần tử quanh trục x hoặc trục y hoặc theo cách khác, điều này phải được xác định.
Các giá trị cho thuộc tính rotate
có thể được cung cấp dưới dạng một góc, tên trục + góc hoặc ba giá trị + góc.
- Nếu cho trước một góc, phần tử sẽ được quay theo chiều kim đồng hồ quanh trục z.
- Nếu tên trục + góc được đưa ra, phần tử sẽ được xoay theo chiều kim đồng hồ quanh trục đã cho đó.
- Nếu cho trước ba giá trị + góc, ba giá trị đó xác định một vectơ mà phần tử được quay xung quanh.
Để hiểu rõ hơn về thuộc tính rotate
, hãy xem bản demo .
Lưu ý: Một kỹ thuật thay thế để xoay một phần tử là sử dụng thuộc tính CSS transform
với hàm CSS rotate()
. Thuộc tính rotate
CSS, như được giải thích trên trang web này, được cho là một cách đơn giản và trực tiếp hơn để chia tỷ lệ một phần tử.
Giá trị mặc định: | không có |
---|---|
Thừa hưởng: | KHÔNG |
Hoạt hình: | Đúng. Đọc về hoạt hình Hãy thử nó |
Phiên bản: | CSS3 |
Cú pháp JavaScript: | đối tượng .style.rotate="-120deg" Hãy thử nó |
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
Property | |||||
---|---|---|---|---|---|
rotate | 104 | 104 | 72 | 14.1 | 90 |
Cú pháp CSS
rotate: axis angle |initial|inherit;
Giá trị tài sản
Property Value | Description | Demo |
---|---|---|
axis | Optional. If not set, z-axis is default. Defines axis to rotate element around. Possible values:
|
Demo ❯ |
angle | Defines how much an element is rotated. Possible units:
|
Demo ❯ |
vector angle | Three numbers define a vector for the element to be rotated around. The numbers are x-, y- and z-coordinates for the vector, respectively. The last value is the angle for how much to rotate. Possible values:
|
Demo ❯ |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Thêm ví dụ
Ví dụ
Khi thuộc tính rotate
được đặt với vectơ và góc, phần tử sẽ được xoay quanh vectơ đó. Ở đây, vectơ là [1 1 0] trong mặt phẳng 2D với tọa độ x và y, sau đó xoay 60 độ:
div {
rotate: 1 1 0 60deg;
}
Hãy tự mình thử »Trang liên quan
Hướng dẫn CSS: Biến đổi CSS 2D
Hướng dẫn CSS: Chuyển đổi CSS 3D
Thuộc tính tỷ lệ CSS: Thuộc tính tỷ lệ CSS
Thuộc tính dịch CSS: Thuộc tính CSS Translate