Thuộc tính nguồn gốc biến đổi CSS
Thí dụ
Đặt vị trí cơ sở của phần tử được xoay:
div
{
transform: rotate(45deg);
transform-origin: 20% 40%;
}
Định nghĩa và Cách sử dụng
Thuộc transform-origin
tính cho phép bạn thay đổi vị trí của các phần tử đã biế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ề transform-origin
tài sản, hãy
xem bản trình diễn .
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 thuộc tính này cho các chuyển đổi 3D , hãy xem bản trình diễn .
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 |
Phiên bản: | CSS3 |
Cú pháp JavaScript: | đối tượng .style.transformOrigin = "0 0" |
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 -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 |
Các trang liên quan
Hướng dẫn CSS: CSS 2D Transforms
Hướng dẫn CSS: CSS 3D Transforms
Tham chiếu HTML DOM: thuộc tính biến đổi