Bản dịch này đang trong quá trình.

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 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).

Initial valuenone
Applies totransformable elements
Inheritedno
Mediavisual
Computed valuethe absolute length or none
Animation typea length
Canonical orderthe unique non-ambiguous order defined by the formal grammar
Creates stacking contextyes

Syntax

Giá trị

none
là từ khoá chỉ thị việc không áp dụng phối cảnh xa gần.
<length>
<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

none | <length>

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ả

Chi tiết kỹ thuật

Specification Status Comment
CSS Transforms Level 2
The definition of 'perspective' in that specification.
Editor's Draft Initial definition

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

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

12-webkit10 (10)
45

(Yes)-webkit
(Yes)

10 (10)-moz
16 (16)[1]

10 15-webkit (Yes)-webkit
Feature Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 3.0-webkit (Yes)-webkit
(Yes)
10.0 (10)-moz
16.0 (16)[1]
8.1 (Yes)-webkit (Yes)-webkit

[1] In addition to the unprefixed support, Gecko 45.0 (Firefox 45.0 / Thunderbird 45.0 / SeaMonkey 2.42) 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 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true.

See also

Document Tags and Contributors

 Những người đóng góp cho trang này: ngminhtrung
 Cập nhật lần cuối bởi: ngminhtrung,