--- title: perspective slug: Web/CSS/perspective translation_of: Web/CSS/perspective ---
{{CSSRef}}

Thuộc tính perspective của CSS xác định khoảng cách từ mặt phẳng z=0 cho đến người dùng, việc này nhằm tạo ra một phối cảnh xa-gần cho những phần tử muốn hiển thị dưới dạng 3D. Mỗi phần tử hiển thị dạng 3D với z > 0 sẽ trở nên to ra (vì "gần" với người xem hơn); ngược lại phần tử dạng 3D có z < 0 sẽ trở nên bé lại (vì "xa" người xem hơn). Giá trị của thuộc tính này sẽ quyết định cường độ của hiệu ứng.

/* Keyword value */
perspective: none;

/* <length> values */
perspective: 20px;
perspective: 3.5em;

/* Global values */
perspective: inherit;
perspective: initial;
perspective: unset;

Những phần của phần tử 3D có toạ độ trục z lớn hơn giá trị của thuộc tính perspective sẽ không được vẽ (nó xuất hiện ở "phía sau" người xem). 

Mặc định thì điểm "biến mất" (vanishing point) được đặt tại chính giữa của phẩn tử, nhưng lập trình viên có thể thay điểm vị trí của điểm này thông qua thuộc tính {{cssxref("perspective-origin")}}.

Đặt giá trị của thuộc tính perspective-origin bằng 0 hoặc none sẽ tạo một cụm môi trường mới (stacking context).

{{cssinfo}}

Syntax

Giá trị

none
là từ khoá chỉ thị việc không áp dụng phối cảnh xa gần.
<length>
{{cssxref("<length>")}} giá trị này là khoảng cáh từ người xem đến mặt phẳng z = 0.  Khi giá trị này lớn hơn 0, phối cảnh xa gần sẽ được thiết lập cho phần tử. Khi nó bằng 0 hoặc nhỏ hơn 0,  thì bỏ đi phối cảnh xa-gần. 

Cú pháp

{{csssyntax}}

Ví dụ

Nội dung file HTML 

<table>
  <tbody>
    <tr>
      <th><code>perspective: 250px;</code>
      </th>
      <th><code>perspective: 350px;</code>
      </th>
      <th><code>perspective: 500px;</code>
      </th>
    </tr>
    <tr>
      <td>
        <div class="container">
          <div class="cube pers250">
            <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>
        </div>
      </td>
      <td>
        <div class="container">
          <div class="cube pers350">
            <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>
        </div>
      </td>
      <td>
        <div class="container">
          <div class="cube pers500">
            <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>
        </div>
      </td>
    </tr>
  </tbody>
</table>

Nội dung file CSS

/* Shorthand classes for different perspective values */
.pers250 {
  perspective: 250px;
  -webkit-perspective: 250px;
}

.pers350 {
  perspective: 350px;
  -webkit-perspective: 350px;
}

.pers500 {
  perspective: 500px;
  -webkit-perspective: 500px;
}

/* Define the container div, the cube div, and a generic face */
 .container {
  width: 200px;
  height: 200px;
  margin: 75px 0 0 75px;
  border: none;
}

.cube {
  width: 100%;
  height: 100%;
  backface-visibility: visible;
  perspective-origin: 150% 150%;
  transform-style: preserve-3d;
  -webkit-backface-visibility: visible;
  -webkit-perspective-origin: 150% 150%;
  -webkit-transform-style: preserve-3d;
}

.face {
  display: block;
  position: absolute;
  width: 100px;
  height: 100px;
   border: none;
  line-height: 100px;
  font-family: sans-serif;
  font-size: 60px;
  color: white;
  text-align: center;
}

/* Define each face based on direction */
.front {
  background: rgba(0, 0, 0, 0.3);
  transform: translateZ(50px);
  -webkit-transform: translateZ(50px);
}

.back {
  background: rgba(0, 255, 0, 1);
  color: black;
  transform: rotateY(180deg) translateZ(50px);
  -webkit-transform: rotateY(180deg) translateZ(50px);
}

.right {
  background: rgba(196, 0, 0, 0.7);
  transform: rotateY(90deg) translateZ(50px);
  -webkit-transform: rotateY(90deg) translateZ(50px);
}

.left {
  background: rgba(0, 0, 196, 0.7);
  transform: rotateY(-90deg) translateZ(50px);
  -webkit-transform: rotateY(-90deg) translateZ(50px);
}

.top {
  background: rgba(196, 196, 0, 0.7);
  transform: rotateX(90deg) translateZ(50px);
  -webkit-transform: rotateX(90deg) translateZ(50px)
}

.bottom {
  background: rgba(196, 0, 196, 0.7);
  transform: rotateX(-90deg) translateZ(50px);
  -webkit-transform: rotateX(-90deg) translateZ(50px);
}

/* Make the table a little nicer */
th, p, td {
  background-color: #EEEEEE;
  padding: 10px;
  font-family: sans-serif;
  text-align: left;
}

Kết quả

{{EmbedLiveSample('Example', 940, 460)}}

Chi tiết kỹ thuật

Specification Status Comment
{{Specname('CSS Transforms 2', '#propdef-perspective', 'perspective')}} {{Spec2('CSS Transforms 2')}} Initial definition

Danh sách trình duyệt tương thích

{{CompatibilityTable}}

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support

12{{property_prefix('-webkit')}}{{CompatGeckoDesktop("10")}}
45

 {{CompatVersionUnknown}}{{property_prefix("-webkit")}}
{{CompatVersionUnknown}}

{{CompatGeckoDesktop("10")}}{{property_prefix('-moz')}}
{{CompatGeckoDesktop("16")}}[1]

 10 15{{property_prefix('-webkit')}} {{CompatVersionUnknown}}{{property_prefix('-webkit')}}
Feature Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 3.0{{property_prefix('-webkit')}} {{CompatVersionUnknown}}{{property_prefix("-webkit")}}
{{CompatVersionUnknown}}		 {{CompatGeckoMobile("10")}}{{property_prefix('-moz')}}
{{CompatGeckoMobile("16")}}[1]		 8.1 {{CompatVersionUnknown}}{{property_prefix('-webkit')}} {{CompatVersionUnknown}}{{property_prefix('-webkit')}}

[1] In addition to the unprefixed support, Gecko 45.0 {{geckoRelease("45.0")}} added support for a -webkit prefixed version of the property for web compatibility reasons behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49.0 {{geckoRelease("49.0")}} the preference defaults to true.

See also