就业培训     下载中心     Wiki     联络
登录   注册
  1. 首页
  2. CSS
  3. perspective-origin

在此页

perspective-origin CSS property determines the position at which the viewer is looking. It is used as the vanishing point by the perspective 特性。

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

perspective-origin and perspective properties are attached to the parent of a child transformed in 3-dimensional space, unlike the perspective() transform function which is placed on the element being transformed.

句法 

/* One-value syntax */
perspective-origin: x-position;
/* Two-value syntax */
perspective-origin: x-position y-position;
/* When both x-position and y-position are keywords,
   the following is also valid */
perspective-origin: y-position x-position;
/* Global values */
perspective-origin: inherit;
perspective-origin: initial;
perspective-origin: unset;

值

x-position
Indicates the position of the abscissa of the vanishing point . It can have one of the following values:
  • <length-percentage> indicating the position as an absolute length value or relative to the width of the element. The value may be negative.
  • left , a keyword being a shortcut for the 0 length value.
  • center , a keyword being a shortcut for the 50% percentage value.
  • right , a keyword being a shortcut for the 100% percentage value.
y-position
Indicates the position of the ordinate of the vanishing point . It can have one of the following values:
  • <length-percentage> indicating the position as an absolute length value or relative to the height of the element. The value may be negative.
  • top , a keyword being a shortcut for the 0 length value.
  • center , a keyword being a shortcut for the 50% percentage value.
  • bottom , a keyword being a shortcut for the 100% percentage value.

形式定义

初始值 50% 50%
适用于 transformable elements
继承 no
百分比 refer to the size of bounding box
计算值 for <length> the absolute value, otherwise a percentage
动画类型 simple list of length, percentage, or calc

形式句法 

<position>
where 
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
where 
<length-percentage> = <length> | <percentage>

范例

Changing the perspective origin

This example shows cubes with popular perspective-origin values.

HTML 

<section>
<figure>
  <figcaption><code>perspective-origin: top left;</code></figcaption>
    <div class="container">
     <div class="cube potl">
      <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>
</figure>
<figure>
  <figcaption><code>perspective-origin: top;</code></figcaption>
   <div class="container">
    <div class="cube potm">
      <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>
</figure>
<figure>
  <figcaption><code>perspective-origin: top right;</code></figcaption>
  <div class="container">
    <div class="cube potr">
      <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>
</figure>
<figure>
  <figcaption><code>perspective-origin: left;</code></figcaption>
  <div class="container">
    <div class="cube poml">
      <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>
</figure>
<figure>
  <figcaption><code>perspective-origin: 50% 50%;</code></figcaption>
  <div class="container">
    <div class="cube pomm">
      <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>
</figure>
<figure>
  <figcaption><code>perspective-origin: right;</code></figcaption>
  <div class="container">
    <div class="cube pomr">
      <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>
</figure>
<figure>
  <figcaption><code>perspective-origin: bottom left;</code></figcaption>
  <div class="container">
    <div class="cube pobl">
      <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>
</figure>
<figure>
  <figcaption><code>perspective-origin: bottom;</code></figcaption>
  <div class="container">
    <div class="cube pobm">
      <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>
</figure>
<figure>
  <figcaption><code>perspective-origin: bottom right;</code></figcaption>
  <div class="container">
    <div class="cube pobr">
      <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>
</figure>
<figure>
  <figcaption><code>perspective-origin: -200% -200%;</code></figcaption>
  <div class="container">
    <div class="cube po200200neg">
      <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>
</figure>
<figure>
  <figcaption><code>perspective-origin: 200% 200%;</code></figcaption>
  <div class="container">
    <div class="cube po200200pos">
      <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>
</figure>
<figure>
  <figcaption><code>perspective-origin: 200% -200%;</code></figcaption>
  <div class="container">
    <div class="cube po200200">
      <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>
</figure>
</section>

CSS 

/* perspective-origin values (unique per example) */
.potl {
  perspective-origin: top left;
}
.potm {
  perspective-origin: top;
}
.potr {
  perspective-origin: top right;
}
.poml {
  perspective-origin: left;
}
.pomm {
  perspective-origin: 50% 50%;
}
.pomr {
  perspective-origin: right;
}
.pobl {
  perspective-origin: bottom left;
}
.pobm {
  perspective-origin: bottom;
}
.pobr {
  perspective-origin: bottom right;
}
.po200200neg {
  perspective-origin: -200% -200%;
}
.po200200pos {
  perspective-origin: 200% 200%;
}
.po200200 {
  perspective-origin: 200% -200%;
}
/* Define the container div, the cube div, and a generic face */
.container {
  width: 100px;
  height: 100px;
  margin: 24px;
  border: none;
}
.cube {
  width: 100%;
  height: 100%;
  backface-visibility: visible;
  perspective: 300px;
  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 layout a little nicer */
section {
  background-color: #EEE;
  padding: 10px;
  font-family: sans-serif;
  text-align: left;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

结果

规范

规范 状态 注释
CSS Transforms Level 2
The definition of 'perspective-origin' in that specification. 		编者草案 初始定义。

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
perspective-origin Chrome 完整支持 36 Edge 完整支持 12 Firefox 完整支持 16
完整支持 16
完整支持 10 Prefixed
Prefixed Implemented with the vendor prefix: -moz-
preference (needs to be set to ). To change preferences in Firefox, visit about:config.
IE 完整支持 10 Opera 完整支持 23 Safari 完整支持 9 WebView Android 完整支持 37 Chrome Android 完整支持 36 Firefox Android 完整支持 16
完整支持 16
完整支持 10 Prefixed
Prefixed Implemented with the vendor prefix: -moz-
preference (needs to be set to ). To change preferences in Firefox, visit about:config.
Opera Android 完整支持 24 Safari iOS 完整支持 9 Samsung Internet Android 完整支持 3.0
Support for three-value syntax of position Chrome 不支持 36 — 68
不支持 36 — 68
Prefixed Implemented with the vendor prefix: -webkit-
Edge 不支持 12 — 79
不支持 12 — 79
Prefixed Implemented with the vendor prefix: -webkit-
Firefox 不支持 16 — 70
不支持 16 — 70
完整支持 10 Prefixed
Prefixed Implemented with the vendor prefix: -moz-
preference (needs to be set to ). To change preferences in Firefox, visit about:config.
IE 完整支持 10 Opera 不支持 15 — 55 Prefixed
不支持 15 — 55 Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari 完整支持 9 WebView Android 不支持 37 — 68
不支持 37 — 68
Prefixed Implemented with the vendor prefix: -webkit-
Chrome Android 不支持 36 — 68
不支持 36 — 68
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Android 完整支持 16
完整支持 16
完整支持 10 Prefixed
Prefixed Implemented with the vendor prefix: -moz-
preference (needs to be set to ). To change preferences in Firefox, visit about:config.
Opera Android 不支持 14 — 48 Prefixed
不支持 14 — 48 Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari iOS 完整支持 9 Samsung Internet Android 不支持 3.0 — 10.0
不支持 3.0 — 10.0
Prefixed Implemented with the vendor prefix: -webkit-

图例

完整支持

完整支持

不支持

不支持

用户必须明确启用此特征。

用户必须明确启用此特征。

要求使用供应商前缀或不同名称。

要求使用供应商前缀或不同名称。

另请参阅

元数据

  • 最后修改：
  1. CSS
  2. CSS 参考
  3. CSS Transforms
  4. 指南
    1. Using CSS transforms
  5. 特性
    1. <transform-function>
    2. backface-visibility
    3. perspective
    4. perspective-origin
    5. rotate
    6. scale
    7. transform
    8. transform-box
    9. transform-origin
    10. transform-style
    11. translate

Copyright  © 2014-2026 乐数软件    

工业和信息化部： 粤ICP备14079481号-1