perspective()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Hàm perspective() CSS function định nghĩa một phép biến đổi thiết lập khoảng cách giữa người dùng và mặt phẳng z=0, tức là góc nhìn phối cảnh từ vị trí người xem nếu giao diện 2 chiều trở thành 3 chiều. Kết quả của nó là kiểu dữ liệu <transform-function>.

Try it

transform: perspective(0);

transform: perspective(none);

transform: perspective(800px);

transform: perspective(23rem);

transform: perspective(6.5cm);

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <div class="face front">1</div>
    <div class="face back">2</div>
    <div class="face right">3</div>
    <div class="face left">4</div>
    <div class="face top">5</div>
    <div class="face bottom">6</div>
  </div>
</section>

#default-example {
  background: linear-gradient(skyblue, khaki);
  perspective: 800px;
  perspective-origin: 150% 150%;
}

#example-element {
  width: 100px;
  height: 100px;
  perspective: 550px;
  transform-style: preserve-3d;
}

.face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: inherit;
  font-size: 60px;
  color: white;
}

.front {
  background: rgb(90 90 90 / 0.7);
  transform: translateZ(50px);
}

.back {
  background: rgb(0 210 0 / 0.7);
  transform: rotateY(180deg) translateZ(50px);
}

.right {
  background: rgb(210 0 0 / 0.7);
  transform: rotateY(90deg) translateZ(50px);
}

.left {
  background: rgb(0 0 210 / 0.7);
  transform: rotateY(-90deg) translateZ(50px);
}

.top {
  background: rgb(210 210 0 / 0.7);
  transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  background: rgb(210 0 210 / 0.7);
  transform: rotateX(-90deg) translateZ(50px);
}

Hàm biến đổi perspective() là một phần của giá trị transform được áp dụng trên phần tử được biến đổi. Điều này khác với thuộc tính perspective và perspective-origin vốn được gắn vào phần tử cha của phần tử con được biến đổi trong không gian 3 chiều.

Cú pháp

css

perspective(d)

Giá trị

d

Là một <length> biểu thị khoảng cách từ người dùng đến mặt phẳng z=0. Mặt phẳng z=0 là mặt phẳng nơi mọi thứ hiện ra trong chế độ xem 2 chiều, hay chính là màn hình. Các giá trị nhỏ hơn 1px (kể cả không) được kẹp lại về 1px. Giá trị âm là lỗi cú pháp.

Các giá trị khác none khiến các phần tử có vị trí z dương trông lớn hơn, còn các phần tử có vị trí z âm trông nhỏ hơn. Các phần tử có vị trí z bằng hoặc lớn hơn giá trị phối cảnh sẽ biến mất như thể chúng ở phía sau người dùng. Giá trị phối cảnh lớn đại diện cho phép biến đổi nhỏ; giá trị perspective() nhỏ đại diện cho phép biến đổi lớn; perspective(none) đại diện cho phối cảnh từ khoảng cách vô hạn và không có biến đổi.

Tọa độ Descartes trên ℝ^2	Tọa độ thuần nhất trên ℝℙ^2	Tọa độ Descartes trên ℝ^3	Tọa độ thuần nhất trên ℝℙ^3
Phép biến đổi này áp dụng cho không gian 3D và không thể biểu diễn trên mặt phẳng.		Phép biến đổi này không phải là phép biến đổi tuyến tính trong ℝ^3 và không thể biểu diễn bằng ma trận tọa độ Descartes.	$\left( \begin{array}{cccc} 1 & 0 & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & -\frac{1}{d} & 1 \\ \end{array} \right)$

Cú pháp chính thức

<perspective()> = 
  perspective( [ <length [0,∞]> | none ] )

Ví dụ

HTML

html

<p>Không có phối cảnh:</p>
<div class="no-perspective-box">
  <div class="face front">A</div>
  <div class="face top">B</div>
  <div class="face left">C</div>
</div>

<p>Có phối cảnh (9cm):</p>
<div class="perspective-box-far">
  <div class="face front">A</div>
  <div class="face top">B</div>
  <div class="face left">C</div>
</div>

<p>Có phối cảnh (4cm):</p>
<div class="perspective-box-closer">
  <div class="face front">A</div>
  <div class="face top">B</div>
  <div class="face left">C</div>
</div>

CSS

css

.face {
  position: absolute;
  width: 100px;
  height: 100px;
  line-height: 100px;
  font-size: 100px;
  text-align: center;
}

p + div {
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  margin-left: 100px;
}
.no-perspective-box {
  transform: rotateX(-15deg) rotateY(30deg);
}

.perspective-box-far {
  transform: perspective(9cm) rotateX(-15deg) rotateY(30deg);
}

.perspective-box-closer {
  transform: perspective(4cm) rotateX(-15deg) rotateY(30deg);
}

.top {
  background-color: skyblue;
  transform: rotateX(90deg) translate3d(0, 0, 50px);
}

.left {
  background-color: pink;
  transform: rotateY(-90deg) translate3d(0, 0, 50px);
}

.front {
  background-color: limegreen;
  transform: translate3d(0, 0, 50px);
}

Kết quả

Thông số kỹ thuật

Specification
CSS Transforms Module Level 2 # funcdef-perspective

Khả năng tương thích trình duyệt

Xem thêm

transform
<transform-function>
Các thuộc tính biến đổi riêng lẻ:

Help improve MDN

Learn how to contribute

This page was last modified on Jan 1, 1970 by MDN contributors.

View this page on GitHub • Report a problem with this content