Perspective-origin - CSS Property

perspective-origin

Summary of characteristics of the perspective-origin property

Quick description
Position of the observer in the case of a 3D distortion with perspective.
Status
Standard
Applies to
Transformable elements
Usable for
HTML
Percentages
Calculated with respect to the dimensions of the element.
Initial value
50% 50%
Inherited by default
No.
Animation type
Computed value: during an animation, the perspective-origin property gradually changes from one value to another.
Canonical order
Per grammar: serialization in the order of syntax.
W3C Module
CSS Transforms Module
References (W3C)
Document status: WD (Working Draft)

Syntax diagram of perspective-origin.

Perspective-origin property - Syntax diagramSyntax diagram of the perspective-origin CSS property. Specifies where the observer is located in a 3D transformation. left left center center right right x | % x | % top top center center bottom bottom y | % y | %perspective-origin:;perspective-origin:;
Syntax diagram of the perspective-origin property.
The links in the diagram provide more details about the values.
Download the diagram in SVG.

In the diagram, the bold terms are the predefined words of CSS, the other terms are described below:

  • length-x and length-y are two numerical values followed by one of CSS dimension units. They can also be percentages calculated relative to the dimensions of the element.

Description of the perspective-origin property.

The property perspective-origin defines the observer's position in the case of a 3D transformation with perspective. Also refer to the transform properties to apply a transformation and perspective to set the perspective effect.

The properties perspective and perspective-origin are to be applied to the parent element, but their effect will be visible on the children of this element.

perspective-origin expects two values that correspond respectively to the horizontal position of the observer and to their vertical position. Example: perspective-origin:left 20%; sets the observation point on the left of the parent and at 20% of its height.

For perspective-origin to produce a visible effect, two conditions must be met:

  • The property perspective must have a value different from none.
  • The element on which perspective-origin is applied must have children that have undergone one or more of the following transformations: rotation around the X axis, rotation around the Y axis, movement along the Z axis.

Values for perspective-origin.

  • perspective-origin: left bottom; x y

    Two values, separated by a space, to position the observation point.

    The first value (x) defines the horizontal position (along the X axis). This can be left, center, right, a dimension, or a percentage. In the latter case, the value is evaluated relative to the width of the element.

    The second value (y) defines the horizontal position (along the X axis). It can be left, center, or right, a dimension, or a percentage, evaluated relative to the height of the element.

    If only one value is specified, the other is set to center by default.

    ABC

    perspective-origin:center;
    ABC

    perspective-origin:left bottom;
  • perspective-origin: 40px 80px; x y

    The position of the observation point can be specified by two numerical values, positive or negative, and followed by a unit of measurement (see CSS dimension units).

    Percentages are calculated relative to the dimensions of the element, the width for the calculation of x and the height for the calculation of y.

    If only one value is specified, it is taken for the horizontal positioning of the observer's point, the vertical position then being equal to center.

    ABC

    perspective-origin:40px -30px;
    ABC

    perspective-origin:10% 50%;
  • perspective-origin: initial; (50% 50%) perspective-origin: inherit; perspective-origin: revert; perspective-origin: revertLayer; perspective-origin: unset;

    See the following pages for more details: initial, inherit, revert, revert-layer, unset.

Animation of the perspective-origin property.

The movement of the origin point by animating the property perspective-origin enhances the 3D effect.
In this example, the properties perspective and perspective-origin are applied to the parent block, while the transformation is applied to the image (a 10-degree rotation around the Y-axis).

Example for perspective-origin

Simulator.

To facilitate understanding, the simulator below shows the effect of the property perspective-origin on animated elements, but it is not essential: the property acts as soon as there is a 3D transformation, animated or not.

The eye indicates where the origin point is placed for the perspective calculation. The effect is seen on the animated elements, which are deformed differently depending on the location of this point.

perspective-origin :
perspective-origin :
Rotation X
Rotation Y
Observation point

Browsers compatibility with perspective-origin.

La propriété perspective-origin ne présente pas de problème de compatibilité avec les navigateurs récents.

Column 1
General support for 3D animations, including support for perspective management and support for the backface-visibility property.
Column 2
Support by browsers for the perspective-origin property which defines the offset of the observer (3D animations).

Notes:

(1) Internet Explorer does not support transform-style:preserve-3d, thus limiting the nesting of animations.

1
3D
transformations
2
perspective-origin
property
Estimated overall support.
97%
96%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

1

KaiOS Browser

Opéra Mobile

Opéra

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

Safari

Safari sur IOS

UC Browser pour Androïd

Opéra mini

See Caniuse.com for more compatibility information.
Caniuse
Caniuse

Historic of the perspective-origin property.

  • CSS Transforms Module Level 2

    In addition to the 2D transformations already presented in level 1 of the specification, this module deals with 3D transformations. It introduces new properties to manage the viewpoint height and the rendering of 3D effects.
    This module also introduces the individual properties of rotation, translation, and zoom effect.

    Regarding perspective-origin. Introduction of 3D transformations and the perspective-origin property in the transformation specification.
    WD
    March 03, 2020
    Working Draft.
    CR
    PR
    REC

See also, about transformations.

The CSS Transforms Module includes everything related to CSS transformations:

Properties:

backface-visibility
Visibility of the rear side of the element (while it is rotating).
perspective
A perspective effect applied to a 3D transformed element.
Perspective-origin
Position of the observer in the case of a 3D distortion with perspective.
rotate
Defines a rotation to apply to the element.
scale
Sets a scaling of the element (magnification or shrinking).
transform
Applies one or more geometric transformations (rotations, enlargements, etc.).
transform-box
Sets the reference box for transformations.
transform-origin
Sets the origin point for transformations.
transform-style
Defines how elements that undergo a 3D transformation are rendered.
translate
Applies a translation to an element (a linear displacement).

Functions:

matrix()
Applies a composite transformation to an element (translations, rotations...).
matrix3d()
Langue française
Applies a series of 3D transformations to an element.
perspective()
Langue française
Sets the height of the observer in the case of a 3D transformation.
rotate()
Sets a rotation to apply to the element in 2D (in the plane of the screen).
rotate3d()
Defines a 3D rotation to be applied to an element around any axis in 3D.
rotateX()
Defines a rotation of the element around the X-axis (in 3D),
rotateY()
Sets a 3D rotation of the element around the y-axis.
rotateZ()
Sets a rotation of the element around the z-axis.
scale()
Sets a magnification or reduction of the element.
scale3d()
Sets 3D scaling.
scaleX()
Sets X-axis scaling.
scaleY()
Set Y-axis scaling.
scaleZ()
Set Z-axis scaling.
skew()
Sets a tilt of the element along the X and/or Y axes.
skewX()
Sets a tilt of the element along the X-axis.
skewY()
Sets a tilt of the element along the Y-axis.
translate()
Defines a translation (a linear move) to an element.
translate3d()
Defines a 3D translation along one or more of the X, Y, and Z axes.
translateX()
Defines a translation along the X-axis (horizontally).
translateY()
Defines a translation along the Y axis (vertically).
translateZ()
Defines a translation along the Z axis (perpendicular to the screen).