The perspective property provides perspective to 3D transformed element and controls the amount of foreshadowing, or in other words it lets you define the perspective on how a 3D element is being viewed.


selector { 

    perspective: length | none;



  • length; Defines the distance of an element to his view.
  • none; Ignores the property (same as 0 length). This is default value.
  • initialinherit

The value is given in pixels that define how far an element is placed from the view.

The value must be greater than zero, with about 2000px appearing normal, 1000px being moderately distorted, and 500px being heavily distorted. The difference with the perspective property is that the transform function affects the element itself, whereas the perspective property affects the element’s children. 

NOTE: The perspective property only affects transform functions after the transform rule has been specified, and it only works with the 3D transformations.


The perspective property example:


›› go to examples ››