Perspective() - CSS Function

Description of the perspective() function.

The function perspective() sets the distance between the observer and the element along the Z-axis. As long as the transformations happen in the plane of the screen (along the X-axis or Y-axis), perspective has no effect. But transformations that move the element along the Z-axis will be affected by perspective: if the element gets closer, it will appear bigger; if it moves away, it will shrink.

Example: the three blocks below have identical dimensions. The first one is in the plane of the screen: its dimensions are unchanged; the second one has been moved back, using a negative value for translatez(); and the third one has been moved forward.
You'll notice that they all really do have the same dimensions. Their size difference is only due to their distance from the viewer.

There is also a property perspective that has a similar role, but with one difference: the property applies to the parent of the transformed element, whereas the function applies to the element itself, via the property transform.

The perspective() value can be used with the following properties:

• transform : Applies one or more geometric transformations (rotations, enlargements, etc.).

Syntaxes of the perspective() function.

• transform: perspective(200px); h

  h is a positive number followed by a unit of absolute dimension (See CSS dimension units).
  It defines the observer's height, in other words the distance between the observer and the next element along the Z axis. The smaller this number, the stronger the perspective effect.

Simulator.

The perspective effect is visible when a transformation moves an element out of the screen plane. The third block has been rotated around the Z axis: it stays in the screen plane, so the perspective() function has no effect on it.

Browsers compatibility with perspective() function.

All the common browsers handle 3D transformations correctly, as well as the perspective() function, which is essential for 3D rendering.

Notes:

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

1

3D
transformations

2

perspective()
function

Estimated overall support.

97%

97%

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

• 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() function in the specification.
  

  March 03, 2020

  Working Draft.

  

  

  

See also, about the transformations.

The specification module "CSS Transforms Module" gathers all the properties and functions concerning CSS transformations:

Properties:

Functions: