此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
perspective
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年9月.
CSS 属性perspective 指定了观察者与 z=0 平面的距离，使具有三维位置变换的元素产生透视效果。z>0 的三维元素比正常大，而 z<0 时则比正常小，大小程度由该属性的值决定。
尝试一下
perspective: none;perspective: 800px;perspective: 23rem;perspective: 5.5cm;<section> <div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>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: rgba(90, 90, 90, 0.7); transform: translateZ(50px);}.back { background: rgba(0, 210, 0, 0.7); transform: rotateY(180deg) translateZ(50px);}.right { background: rgba(210, 0, 0, 0.7); transform: rotateY(90deg) translateZ(50px);}.left { background: rgba(0, 0, 210, 0.7); transform: rotateY(-90deg) translateZ(50px);}.top { background: rgba(210, 210, 0, 0.7); transform: rotateX(90deg) translateZ(50px);}.bottom { background: rgba(210, 0, 210, 0.7); transform: rotateX(-90deg) translateZ(50px);}三维元素在观察者后面的部分不会绘制出来，即 z 轴坐标值大于perspective 属性值的部分。
默认情况下，消失点位于元素的中心，但是可以通过设置perspective-origin 属性来改变其位置。
当该属性值不为0 和none 时，会创建新的层叠上下文。在这种情况下，容器内元素的层叠关系像是使用了position: fixed 一样。
语法
css
/* Keyword value */perspective: none;/* <length> values */perspective: 20px;perspective: 3.5em;/* Global values */perspective: inherit;perspective: initial;perspective: unset;值
标准语法
perspective =
none|
<length [0,∞]>
举例
设置视角
此示例显示了一个立方体，其 perspective 设置为不同的值。立方体的收缩由perspective 属性定义。它的值越小，视角越深。
Result
HTML
下面的 HTML 创建了同一个立方体的四个副本，perspective 设置为不同的值。
html
<table> <tbody> <tr> <th><code>perspective: 250px;</code></th> <th><code>perspective: 350px;</code></th> </tr> <tr> <td> <div> <div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> </div> </td> <td> <div> <div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> </div> </td> </tr> <tr> <th><code>perspective: 500px;</code></th> <th><code>perspective: 650px;</code></th> </tr> <tr> <td> <div> <div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> </div> </td> <td> <div> <div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> </div> </td> </tr> </tbody></table>CSS
CSS 建立了不同透视距离的 class，还包括容器盒、立方体本身以及它的每个面的 class。
css
/* Shorthand classes for different perspective values */.pers250 { perspective: 250px;}.pers350 { perspective: 350px;}.pers500 { perspective: 500px;}.pers650 { perspective: 650px;}/* 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;}.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);}.back { background: rgba(0, 255, 0, 1); color: black; transform: rotateY(180deg) translateZ(50px);}.right { background: rgba(196, 0, 0, 0.7); transform: rotateY(90deg) translateZ(50px);}.left { background: rgba(0, 0, 196, 0.7); transform: rotateY(-90deg) translateZ(50px);}.top { background: rgba(196, 196, 0, 0.7); transform: rotateX(90deg) translateZ(50px);}.bottom { background: rgba(196, 0, 196, 0.7); 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;}规范
| Specification |
|---|
| CSS Transforms Module Level 2 # perspective-property |