Hàm perspective() trong CSS

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

CSS perspective() Hàm định nghĩa khoảng cách từ người dùng đến mặt phẳng z=0.

perspective() Hàm trong transform trong thuộc tính.

Mô hình

Sử dụng perspective() Thêm một số hiệu ứng thấu qua cho hai khối lập phương:

.cube1 {
  font-size: 4em;
  width: 2em;
  margin: 1.5em auto;
  transform-style: preserve-3d;
  transform: perspective(5cm) rotateX(-15deg) rotateY(30deg);
}
.cube2 {
  font-size: 4em;
  width: 2em;
  margin: 1.5em auto;
  transform-style: preserve-3d;
  transform: perspective(10cm) rotateX(-15deg) rotateY(30deg);
}

Thử ngay

Cú pháp CSS

perspective(length|none)
Giá trị Mô tả
length Phải có. Định nghĩa khoảng cách từ người dùng đến mặt phẳng z=0. none biểu thị không thực hiện đổi đổi.

Chi tiết kỹ thuật

Phiên bản: Mô đun Đổi đổi CSS cấp 2

Hỗ trợ trình duyệt

Số trong bảng biểu thị phiên bản trình duyệt đầu tiên hỗ trợ hàm này hoàn toàn.

Chrome Edge Firefox Safari Opera
perspective()
12 12 10 4 15
perspective(none)
97 97 93 15.4 83

Trang liên quan

Hướng dẫn:Đổi đổi 3D trong CSS

Tham khảo:Thuộc tính transform CSS

Tham khảo:Hàm rotate() trong CSS

Tham khảo:Hàm rotate3d() trong CSS

Tham khảo:Hàm rotateX() trong CSS

Tham khảo:Hàm rotateY() CSS

Tham khảo:Hàm rotateZ() CSS