CSS perspective() Function

❮ Previous Functions Next ❯


.perspective-box-far {
  transform: perspective(9cm) rotateX(-15deg) rotateY(30deg);

.perspective-box-closer {
  transform: perspective(4cm) rotateX(-15deg) rotateY(30deg);



The perspective() css function defines a transformation that sets the distance between the user and the z=0 plane, the perspective from which the viewer would be if the 2-dimensional interface were 3-dimensional.

The perspective() transform function is part of the transform value applied on the element being transformed. This differs from the perspective and perspective-origin properties which are attached to the parent of a child transformed in 3-dimensional space.

Version: CSS3

Standard Syntax


Browser Support

The numbers in the table specify the first browser version that fully supports the property.


Function Arguments

The following table describes the arguments of this function.

Argument Description
distance If it is 0 or a negative value, no perspective transform is applied.
❮ Previous Functions Next ❯