CSS perspective property

Definition and Usage

The perspective property defines the distance of the 3D element from the view, in pixels. This property allows you to change the perspective of viewing the 3D element.

When the perspective property is defined for an element, its child elements will receive the perspective effect, not the element itself.

Note:The perspective property only affects 3D transformation elements.

Tip:Please refer to perspective-origin Use this property along with the property to be able to change the bottom position of the 3D element.

See also:

CSS3 Tutorial:CSS3 3D Transformation

HTML DOM Reference Manual:perspective property

Example

Sets the view of the element being viewed:

div
{
perspective: 500;
}

Try it yourself

CSS Syntax

perspective: number|none;

Property Value

Value Description
number The distance of the element from the view, in pixels.
none Default Value. Same as 0. No perspective is set.

Technical Details

Default Value: none
Inheritance: yes
Version: CSS3
JavaScript Syntax: object.style.perspective=500

Browser support

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

Numbers with -webkit- or -moz- prefixes indicate the first version using the prefix.

Chrome IE / Edge Firefox Safari Opera
36.0
12.0 -webkit-		 10.0 16.0
10.0 -moz-		 9.0
4.0.3 -webkit-		 23.0
15.0 -webkit-