Perspective - Property CSS

Syntax diagram of perspective.

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

• length is a positive or zero numeric value, followed by one of CSS dimension units.

Description of the perspective property.

The property perspective sets a perspective effect on an element that has undergone a 3D transformation. Refer to the page on transform for an overview of CSS transformations.

The property applies to the container. The perspective effect is calculated by considering that the observer is at the center of the container element. See the perspective-origin property to change the position of the observer.

Values below 1 pixel are rounded up to 1 pixel. In any case, it is rare to go down to such low values because the rendering then looks strange. Generally, we stick to minimum values of 50 pixels.

perspective has no effect on elements that have not undergone transformation, or those that have undergone a transformation that leaves them in the 2D plane. The effect of perspective is visible on the following transformations:

• Rotations around the X axis (horizontal) or around the Y axis (vertical).
• Translation along the Z axis.
• All combinations involving at least one of the transformation above.

Warning, unlike the function perspective(), the property perspective applies its effect on child elements. Therefore, the property must be applied to the container. The result, however, is noticeably different.

Values for perspective.

• perspective: none;

  No perspective effect is applied.

  😸 😹 😻
• perspective: 200px;

  This value defines the distance between the observer and the element. The perspective effect is greater the closer the observer and the element are.

  The value is a strictly positive number, followed by one of CSS dimension units. Percentages are not allowed.

  😸 😹 😻

  
  perspective:100px;

  😸 😹 😻

  
  perspective:200px;
• perspective: initial; (none) perspective: inherit; perspective: revert; perspective: revertLayer; perspective: unset;

  Common values ​​are presented on these pages: initial, inherit, revert, revert-layer, unset.

Animation of the perspective property.

The animation of perspective can produce surprising results. For example, in this example it seems that the speed of the animation is not constant at all. Yet it is indeed a linear animation, but the perspective calculation is much more sensitive for small values (where the perspective effect is most pronounced).

The example consists of a parent element, on which the perspective is applied (with animation), and a child element on which the transformation has been applied. Here, it is a rotation along the Y axis (vertical).

Simulator.

The simulator below will allow you to understand the effect of the perspective property: the two inner frames have already received the styles to rotate them along the X or Y axis. Enter a size between 50px and 700px and observe the result. Below 50 pixels, the distortion is really too strong and makes the text unreadable. Above 700px, the perspective variations are too subtle.

The observer is supposed to be located in the middle of the parent element. Its position is represented by the drawing of an eye. See the property perspective-origin to change this location.

For fun, you can also watch all this in animation  

Browsers compatibility with perspective.

Notes:

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

(2) In IOS 13, the perspective property does not work correctly.

1

3D
transformations

2

perspective
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

2

UC Browser pour Androïd

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Caniuse

Historic of the perspective 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. Introduction of 3D transformations and the perspective property in the transformation specification.
  

  March 03, 2020

  Working Draft.

  

  

  

See also, regarding the transformations.

The W3C organizes CSS specifications into modules. The CSS Transforms Module gathers all the definitions concerning 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()

Applies a series of 3D transformations to an element.

perspective()

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