Theperspective-originCSS property determines the position at which the viewer is looking. It is used as thevanishing point by theperspective property.

Try it

perspective-origin: center;

perspective-origin: top;

perspective-origin: bottom right;

perspective-origin: -170%;

perspective-origin: 500% 200%;

<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: 550px;}#example-element {  width: 100px;  height: 100px;  transform-style: preserve-3d;  perspective: 250px;}.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: rgb(90 90 90 / 0.7);  transform: translateZ(50px);}.back {  background: rgb(0 210 0 / 0.7);  transform: rotateY(180deg) translateZ(50px);}.right {  background: rgb(210 0 0 / 0.7);  transform: rotateY(90deg) translateZ(50px);}.left {  background: rgb(0 0 210 / 0.7);  transform: rotateY(-90deg) translateZ(50px);}.top {  background: rgb(210 210 0 / 0.7);  transform: rotateX(90deg) translateZ(50px);}.bottom {  background: rgb(210 0 210 / 0.7);  transform: rotateX(-90deg) translateZ(50px);}

Theperspective-origin andperspective properties are attached to the parent of a child transformed in 3-dimensional space, unlike theperspective() 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: revert;perspective-origin: revert-layer;perspective-origin: unset;

Values

x-position

Indicates the position of the abscissa of thevanishing 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 the0 length value.
• center, a keyword being a shortcut for the50% percentage value.
• right, a keyword being a shortcut for the100% percentage value.

y-position

Indicates the position of the ordinate of thevanishing 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 the0 length value.
• center, a keyword being a shortcut for the50% percentage value.
• bottom, a keyword being a shortcut for the100% percentage value.

Formal definition

Formal syntax

perspective-origin =
<position>

<position> =
<position-one>|
<position-two>|
<position-four>

<position-one> =
left|
center|
right|
top|
bottom|
x-start|
x-end|
y-start|
y-end|
block-start|
block-end|
inline-start|
inline-end|
<length-percentage>

<position-two> =
[left|center|right|x-start|x-end]&&[top|center|bottom|y-start|y-end]|
[left|center|right|x-start|x-end|<length-percentage>][top|center|bottom|y-start|y-end|<length-percentage>]|
[block-start|center|block-end]&&[inline-start|center|inline-end]|
[start|center|end]{2}

<position-four> =
[[left|right|x-start|x-end]<length-percentage>]&&[[top|bottom|y-start|y-end]<length-percentage>]|
[[block-start|block-end]<length-percentage>]&&[[inline-start|inline-end]<length-percentage>]|
[[start|end]<length-percentage>]{2}

<length-percentage> =
<length>|
<percentage>

Examples

Changing the perspective origin

An example showing how to changeperspective-origin is given inUsing CSS transforms > Changing the perspective origin.

Specifications

Browser compatibility

See also

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