Search within TutorialsPark

CSS3 perspective Property


To set the origin point of the element from where the perspective is to be viewed


Definition and Notes.

1. The CSS3 perspective-origin property sets the position from where the viewer is looking at.It is used as a vanishing-point.

2. The value is a pair of co-ordinates to denote the perspective-origin. The default value is (50%, 50%) i.e center of the webpage.

3. The property is applicable to the Child element and not the parent to which it was applied

4. A sister property of perspective-origin is perspective , it defines the distance of the element from the user


Syntax:

CSS3 perspective-origin property. internetexplorer safari firefox opera chrome

View in Splitscreen»

Code-Editor:

Note- It defines the point in the element that appears to be directly in front of the viewer.

Property Values

Value Description
x-axis The X co-ordinates of the viewpoint,the default value is 50%.
other values it can assume are:
  • left
  • center
  • right
  • length
  • percentage(%)
y-axis The Y co-ordinates of the viewpoint,the default value is 50%.
other values it can assume are:
  • left
  • center
  • right
  • length
  • percentage(%)

Specifications

Specs Value
Name perspective
Value [[<number> | <number> | left | center | right] [ <number> | <number> | top | center | bottom ]?] | [[ left | center | right] ||[top | center | bottom]]
Initial Value 50% 50%
Applies to Block-level and inline elements
Javascript syntax object.style.perspectiveOrigin="100px 50px"
Inherited No
Percentages Refer to the size of the element box
Computed Value Same as declared Value
Browser Support internetexplorer safari firefox opera chrome

Related Examples.