path: root/files/vi/web/css/perspective/index.html

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

<p>Thuộc tính <strong><code>perspective</code></strong> của <a href="/en-US/docs/Web/CSS">CSS</a> 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 &gt; 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 &lt; 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.</p>

<pre class="brush: css no-line-numbers">/* Keyword value */
perspective: none;

/* &lt;length&gt; values */
perspective: 20px;
perspective: 3.5em;

/* Global values */
perspective: inherit;
perspective: initial;
perspective: unset;
</pre>

<p>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 <code>perspective</code> sẽ không được vẽ (nó xuất hiện ở "phía sau" người xem). </p>

<p>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")}}.</p>

<p>Đặt giá trị của thuộc tính <code>perspective-origin</code> bằng <code>0</code> hoặc <code>none</code> sẽ tạo một cụm môi trường mới (<a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">stacking context</a>).</p>

<p>{{cssinfo}}</p>

<h2 id="Syntax">Syntax</h2>

<h3 id="Giá_trị">Giá trị</h3>

<dl>
 <dt><code>none</code></dt>
 <dd>là từ khoá chỉ thị việc không áp dụng phối cảnh xa gần.</dd>
 <dt><code>&lt;length&gt;</code></dt>
 <dd>{{cssxref("&lt;length&gt;")}} 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 <code>0</code>, phối cảnh xa gần sẽ được thiết lập cho phần tử. Khi nó bằng <code>0</code> hoặc nhỏ hơn <code>0</code>,  thì bỏ đi phối cảnh xa-gần. </dd>
</dl>

<h3 id="Cú_pháp">Cú pháp</h3>

<pre class="syntaxbox">{{csssyntax}}</pre>

<h2 id="Ví_dụ">Ví dụ</h2>

<h3 id="Nội_dung_file_HTML">Nội dung file HTML </h3>

<pre class="brush: html">&lt;table&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;th&gt;&lt;code&gt;perspective: 250px;&lt;/code&gt;
      &lt;/th&gt;
      &lt;th&gt;&lt;code&gt;perspective: 350px;&lt;/code&gt;
      &lt;/th&gt;
      &lt;th&gt;&lt;code&gt;perspective: 500px;&lt;/code&gt;
      &lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;
        &lt;div class="container"&gt;
          &lt;div class="cube pers250"&gt;
            &lt;div class="face front"&gt;1&lt;/div&gt;
            &lt;div class="face back"&gt;2&lt;/div&gt;
            &lt;div class="face right"&gt;3&lt;/div&gt;
            &lt;div class="face left"&gt;4&lt;/div&gt;
            &lt;div class="face top"&gt;5&lt;/div&gt;
            &lt;div class="face bottom"&gt;6&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/td&gt;
      &lt;td&gt;
        &lt;div class="container"&gt;
          &lt;div class="cube pers350"&gt;
            &lt;div class="face front"&gt;1&lt;/div&gt;
            &lt;div class="face back"&gt;2&lt;/div&gt;
            &lt;div class="face right"&gt;3&lt;/div&gt;
            &lt;div class="face left"&gt;4&lt;/div&gt;
            &lt;div class="face top"&gt;5&lt;/div&gt;
            &lt;div class="face bottom"&gt;6&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/td&gt;
      &lt;td&gt;
        &lt;div class="container"&gt;
          &lt;div class="cube pers500"&gt;
            &lt;div class="face front"&gt;1&lt;/div&gt;
            &lt;div class="face back"&gt;2&lt;/div&gt;
            &lt;div class="face right"&gt;3&lt;/div&gt;
            &lt;div class="face left"&gt;4&lt;/div&gt;
            &lt;div class="face top"&gt;5&lt;/div&gt;
            &lt;div class="face bottom"&gt;6&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;</pre>

<h3 id="Nội_dung_file_CSS">Nội dung file CSS</h3>

<pre class="brush: 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;
}</pre>

<h3 id="Kết_quả">Kết quả</h3>

<p>{{EmbedLiveSample('Example', 940, 460)}}</p>

<h2 id="Chi_tiết_kỹ_thuật">Chi tiết kỹ thuật</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{Specname('CSS Transforms 2', '#propdef-perspective', 'perspective')}}</td>
   <td>{{Spec2('CSS Transforms 2')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Danh_sách_trình_duyệt_tương_thích">Danh sách trình duyệt tương thích</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>
    <p>12{{property_prefix('-webkit')}}{{CompatGeckoDesktop("10")}}<br>
     45</p>
   </td>
   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
    {{CompatVersionUnknown}}</td>
   <td>
    <p>{{CompatGeckoDesktop("10")}}{{property_prefix('-moz')}}<br>
     {{CompatGeckoDesktop("16")}}<sup>[1]</sup></p>
   </td>
   <td>10</td>
   <td>15{{property_prefix('-webkit')}}</td>
   <td>{{CompatVersionUnknown}}{{property_prefix('-webkit')}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Edge</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>3.0{{property_prefix('-webkit')}}</td>
   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
    {{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("10")}}{{property_prefix('-moz')}}<br>
    {{CompatGeckoMobile("16")}}<sup>[1]</sup></td>
   <td>8.1</td>
   <td>{{CompatVersionUnknown}}{{property_prefix('-webkit')}}</td>
   <td>{{CompatVersionUnknown}}{{property_prefix('-webkit')}}</td>
  </tr>
 </tbody>
</table>
</div>

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

<h2 id="See_also">See also</h2>

<ul>
 <li><a href="/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">Using CSS Transforms</a></li>
</ul>