Windows apps
Collapse the table of content
Expand the table of content
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

perspective() function

Specifies a perspective projection matrix as a length value. A perspective projection matrix modifies the perspective through which an element is viewed, giving an element of depth. As the value of this function increases, the further away from the viewer the element will appear.

CSS Transforms Module, Level 3, Section 13.2Internet Explorer 10




( <length> )



Value in pixels that specifies a perspective projection matrix. This value is expressed as a number followed by "px".

Standards information


The value must be greater than 0 and is given in pixels.

A perspective projection matrix with the parameter length is equivalent to the following transformation matrix: Transform matrix for a perspective projection matrix For more information about transformation matrices, see Mathematical Description of Transform Functions, in the CSS3 Transforms specification.

The perspective function is often necessary for other 3-D transformation functions to have a visible effect.


The following code snippet is an example of the perspective function in use. When applied to a square blue div element along with the translateZ function (which enables the specified element to appear to have moved away from the viewer), it has the effect illustrated in the image. (The light-blue square indicates the original position of the transformed element.)

div {    
  transform: perspective(500px) translateZ(-60px);

A square blue div with white text, after having the following transform functions applied to it: -ms-transform: perspective(500px) translateZ(-60px);

See also

Transform Functions
Mathematical Description of Transform Functions
Direct3D: Matrices
Hands On: 3-D Transforms



© 2017 Microsoft