Thuộc tính transform-origin CSS

Đị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%;
}

Thử ngay

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à:

  • trái
  • giữa
  • phải
  • length
  • %
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à:

  • trên
  • giữa
  • dưới
  • length
  • %
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à:

  • length

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-