Thuộc tính transform-origin CSS
- trang trước transform
- Trang tiếp theo transform-style
Đị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 yếu tố được chuyển đổi.
Các yếu tố chuyển đổi 2D có thể thay đổi các trục x và y của yếu tố. Các yếu tố chuyển đổi 3D có thể thay đổi cả trục Z.
Để hiểu rõ hơn về thuộc tính transform-origin, hãy xem nàyHiển thị.
Người dùng Safari/Chrome: Để hiểu rõ hơn về trường hợp sử dụng thuộc tính transform-origin trong chuyển đổi 3D, hãy xem nàyHiển thị.
Ghi chú:Thuộc tính này phải được sử dụng cùng với transform sử dụng cùng thuộc tính.
Để hiểu rõ hơn về thuộc tính transform, hãy xem nàyHiển thị.
Xem thêm:
Hướng dẫn CSS3:Chuyển đổi 2D CSS3
Hướng dẫn CSS3:Chuyển đổi 3D CSS3
Hướng dẫn HTML DOM:Thuộc tính transformOrigin
Ví dụ
Đặt vị trí cơ sở của yếu tố xoay:
div { transform: rotate(45deg); transform-origin: 20% 40%; }
Có nhiều ví dụ hơn ở cuối trang.
Ngữ pháp CSS
transform-origin: x-axis y-axis z-axis;
Giá trị thuộc tính
Giá trị | Mô tả |
---|---|
x-axis |
Định nghĩa vị trí của khung nhìn được đặt ở đâu trên trục X. Giá trị có thể là:
|
y-axis |
Định nghĩa vị trí của khung nhìn được đặt ở đâu trên trục Y. Giá trị có thể là:
|
z-axis |
Định nghĩa vị trí của khung nhìn được đặt ở đâu trên trục Z. Giá trị có thể là:
|
Chi tiết kỹ thuật
Giá trị mặc định: | 50% 50% 0 |
---|---|
Di truyền: | không |
Phiên bản: | CSS3 |
Ngữ pháp JavaScript: | object.style.transformOrigin="20% 40%" |
Hỗ trợ trình duyệt
Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ hoàn toàn thuộc tính này.
Số với tiền tố -webkit-、-moz- hoặc -ms- biểu thị phiên bản đầu tiên sử dụng tiền tố.
Thuộc tính | Chrome | IE | Firefox | Safari | Opera |
---|---|---|---|---|---|
transform-origin (语法 hai giá trị) |
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 (语法 ba ba) |
36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
9.0 4.0 -webkit- |
23.0 15.0 -webkit- |
- trang trước transform
- Trang tiếp theo transform-style