Thuộc tính nguồn gốc chuyển đổi CSS
Ví dụ
Đặt vị trí cơ sở của phần tử được xoay:
div
{
transform: rotate(45deg);
transform-origin: 20% 40%;
}
Hãy tự mình thử »Định nghĩa và cách sử dụng
Thuộc tính transform-origin
cho phép bạn thay đổi vị trí của các phần tử được chuyển đổi.
Các phép biến đổi 2D có thể thay đổi trục x và y của một phần tử. Các phép biến đổi 3D cũng có thể thay đổi trục z của một phần tử.
Để hiểu rõ hơn về thuộc tính transform-origin
, hãy xem bản demo .
Lưu ý: Thuộc tính này phải được sử dụng cùng với thuộc tính biến đổi .
Mẹo: Để hiểu rõ hơn về thuộc tính này đối với các phép biến đổi 3D , hãy xem bản demo .
Giá trị mặc định: | 50% 50% 0 |
---|---|
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.transformOrigin="0 0" Hãy dùng thử |
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.
Các số theo sau là -webkit-, -moz- hoặc -o- chỉ định phiên bản đầu tiên hoạt động với tiền tố.
Property | |||||
---|---|---|---|---|---|
transform-origin (two-value syntax) |
36.0 4.0 -webkit- |
10.0 9.0 -ms- |
16.0 3.5 -moz- |
9.0 3.2 -webkit- |
23.0 15.0 -webkit- 10.5 -o- |
transform-origin (three-value syntax) |
36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
9.0 4.0 -webkit- |
23.0 15.0 -webkit- |
Cú pháp CSS
transform-origin: x-axis y-axis z-axis |initial|inherit;
Giá trị tài sản
Property Value | Description |
---|---|
x-axis | Defines where the view is placed at the x-axis. Possible values:
|
y-axis | Defines where the view is placed at the y-axis. Possible values:
|
z-axis | Defines where the view is placed at the z-axis (for 3D transformations). Possible values:
|
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Trang liên quan
Hướng dẫn CSS: Biến đổi CSS 2D
Hướng dẫn CSS: Chuyển đổi CSS 3D
Tham chiếu DOM HTML: thuộc tính TransformOrigin