Thuộc tính perspective-origin của CSS

Định nghĩa và cách sử dụng

Thuộc tính perspective-origin định nghĩa trục X và Y mà phần tử 3D dựa vào. Thuộc tính này cho phép bạn thay đổi vị trí dưới đáy của phần tử 3D.

Khi định nghĩa thuộc tính perspective-origin cho phần tử, các phần tử con sẽ nhận được hiệu ứng透视,而不是 phần tử chính.

Ghi chú:Thuộc tính này phải được sử dụng cùng với perspective Thuộc tính này phải được sử dụng cùng với các thuộc tính khác và chỉ ảnh hưởng đến phần tử chuyển đổi 3D.

Xem thêm:

Hướng dẫn CSS3:CSS3 - Chuyển đổi 3D

Hướng dẫn HTML DOM:Thuộc tính perspectiveOrigin

Mô hình

Đặt điểm cơ bản của phần tử 3D:

div
{
perspective:150;
perspective-origin: 10% 10%;
}

Thử ngay

Cú pháp CSS

perspective-origin: x-axis y-axis;

Giá trị thuộc tính

Giá trị Mô tả
x-axis

Định nghĩa vị trí của视图 trên trục x. Giá trị mặc định: 50%.

Giá trị có thể:

  • left
  • center
  • right
  • length
  • %
y-axis

Định nghĩa vị trí của视图 trên trục y. Giá trị mặc định: 50%.

Giá trị có thể:

  • top
  • center
  • bottom
  • length
  • %

Chi tiết kỹ thuật

Giá trị mặc định: 50% 50%
Di truyền: no
Phiên bản: CSS3
Cú pháp JavaScript: object.style.perspectiveOrigin="10% 10%"

Hỗ trợ trình duyệt

Số trong bảng cho biết phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính này.

Chrome IE / Edge Firefox Safari Opera
36.0
12.0 -webkit-		 10.0 16.0
10.0 -moz-		 9.0
4.0.3 -webkit-		 23.0
15.0 -webkit-