Web/CSS/perspective-origin

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

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.

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

Syntax

/* 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;

Values

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.

Formal definition

Initial value	50% 50%
Applies to	transformable elements
Inherited	no
Percentages	refer to the size of bounding box
Computed value	for <length> the absolute value, otherwise a percentage
Animation type	simple list of length, percentage, or calc

Formal syntax

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

Examples

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);
}

Specifications

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

Browser compatibility

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.

Update compatibility data on 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 Full support 36 Full support 36 Full support 12 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Edge Full support 12 Full support 12 Full support 12 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Firefox Full support 16 Full support 16 Full support 10 Prefixed' Prefixed' Implemented with the vendor prefix: -moz- Full support 49 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit- Full support 45 Prefixed' Disabled' Prefixed' Implemented with the vendor prefix: -webkit- Disabled' From version 45: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.	IE Full support 10	Opera Full support 23 Full support 23 Full support 15 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Safari Full support 9 Full support 9 Full support 4 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	WebView Android Full support 37 Full support 37 Full support 3 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Chrome Android Full support 36 Full support 36 Full support 18 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Firefox Android Full support 16 Full support 16 Full support 10 Prefixed' Prefixed' Implemented with the vendor prefix: -moz- Full support 49 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit- Full support 45 Prefixed' Disabled' Prefixed' Implemented with the vendor prefix: -webkit- Disabled' From version 45: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.	Opera Android Full support 24 Full support 24 Full support 14 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Safari iOS Full support 9 Full support 9 Full support 2 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Samsung Internet Android Full support 3.0 Full support 3.0 Full support 1.0 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-
Support for three-value syntax of position	Chrome No support 36 — 68 No support 36 — 68 Full support 12 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Edge No support 12 — 79 No support 12 — 79 Full support 12 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Firefox No support 16 — 70 No support 16 — 70 Full support 10 Prefixed' Prefixed' Implemented with the vendor prefix: -moz- Full support 49 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit- Full support 45 Prefixed' Disabled' Prefixed' Implemented with the vendor prefix: -webkit- Disabled' From version 45: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.	IE Full support 10	Opera No support 15 — 55 Prefixed' No support 15 — 55 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Safari Full support 9 Full support 9 Full support 4 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	WebView Android No support 37 — 68 No support 37 — 68 Full support 3 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Chrome Android No support 36 — 68 No support 36 — 68 Full support 18 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Firefox Android Full support 16 Full support 16 Full support 10 Prefixed' Prefixed' Implemented with the vendor prefix: -moz- Full support 49 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit- Full support 45 Prefixed' Disabled' Prefixed' Implemented with the vendor prefix: -webkit- Disabled' From version 45: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.	Opera Android No support 14 — 48 Prefixed' No support 14 — 48 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Safari iOS Full support 9 Full support 9 Full support 2 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Samsung Internet Android No support 3.0 — 10.0 No support 3.0 — 10.0 Full support 1.0 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-

Legend

Full support  

Full support

No support  

No support

User must explicitly enable this feature.'

User must explicitly enable this feature.

Requires a vendor prefix or different name for use.'

Requires a vendor prefix or different name for use.

See also

• Using CSS Transforms
• transform-style
• <transform-function>
• perspective
• transform: perspective() function

perspective-origin by Mozilla Contributors is licensed under CC-BY-SA 2.5.